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>
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 !
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");
}
});