javascripthtmlcsstilemetro-ui-css

metro ui css tile element-selected doesn't work


Visual Studio 2013, ASP.NET web form, metro UI CSS 3.0

I'm trying to create a tile element-selected that looked like the one in this site http://metroui.org.ua/tiles.html

<div class="tile bg-green fg-white element-selected" data-role="tile">
   <div class="tile-content iconic">
      <span class="icon mif-home"></span>
      <div class="tile-label"></div>
   </div>
</div>

enter image description here

my code create a tile like this one above, with the tick icon checked, but when I press the tile, the tick icon doesn't uncheck as it should be !

The thing i want here is to create a tile that will display a tick icon when user click it, and will uncheck when user click it again.

Hope somebody can help me !


Solution

  • This is how I made the select and deselect work:

    $("[data-role='tile']").click(function(){
        if($(this).hasClass("element-selected")){
            $(this).removeClass("element-selected");
        }else{
            $(this).addClass("element-selected");
        }
    });
    

    Here is the link to the JSFiddle demo