Clever Geek Handbook

Selected metro ui css tile not working

Visual Studio 2013, ASP.NET Web Form, Metro UI CSS 3.0

I am trying to create a selected tile element similar to the one on 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 will create a slab like above with the checkmark icon checked, but when I click on the tile the checkmark icon is not cleared as it should!

What I want here is to create a tile that will display a checkmark icon when the user clicks on it, and uncheck the box when the user clicks on it again.

Hope someone can help me!

+3


source to share


1 answer


This is how I made and deselected:

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


Here is a link to the JSFiddle demo

+2


source






More articles:


All Articles