MR.Don't know MR.Don't know - 6 months ago 16
CSS Question

Change class on click

how to acomplish this:

when i click on

box-btn



  1. Box
    btn
    will change icon

  2. Text and title will be different color

  3. Box Image get some overlay






This change will be active until i click again, then will be restarted to the old classes.
Thank you

<div class="col-md-4 wrapper">
<div class="inner">
<div class="image-box"></div>
<div class="main">
<h2 class="box-title">TITLE</h2>
<p class="box-text"></p>
<div class="box-foot">
<a href="">
<div class="box-img"></div>
</a>
<span class="white-line-vertical"></span>
<button type="submit" class="box-btn">
<span class="glyphicon glyphicon-star-empty" aria-hidden="true"></span>
</button>
</div>
</div>
</div>
</div>

Answer

Try this,

CSS

.clicked {
     color : #ececec; //whatever color you want to change to
 }

JS

$("button.box-btn").on("click", function(){
   $(this).toggleClass("clicked");
   $(this).parent().parent().toggleClass("btn-clicked");
   if($(this).hasClass("clicked")){
     $(this).removeClass("glyphicon-star-empty");
     $(this).addClass("glyphicon-star-full");
   }else{
     $(this).removeClass("glyphicon-star-full");
     $(this).addClass("glyphicon-star-empty");
   }
})