CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstrap
MR.Don't know
MR.Don't know

Reputation: 235

Boostrap change color on click

I got this code, everything i ok, and functional. I need option to change color of heart when i click .

Now:

Click on gray empty heart will give full gray full heart

I need: Click on gray empty heart will give full RED full heart

$(function($) {
  $(document).on('click', '.box-btn', function(event) {
    var target = $(event.target).closest('.wrapper');
    target.find('.glyphicon').toggleClass('glyphicon-heart-empty glyphicon-heart');
	
    
  });
});
.box-btn {
     float:left;
    background: transparent;
    font-size: 53px;
    color: #4D4E56;
    font-weight: 300;
    cursor: pointer;
    border-radius: 2px;
    line-height: 0.5;
    border: none;
	outline:none;

}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="submit" class="box-btn"><span class="glyphicon glyphicon-heart-empty" aria-hidden="true"></span></button>

Upvotes: 3

Views: 1223

Answers (1)

DaniP
DaniP

Reputation: 38252

You can use another class to change the color with Jquery using toggleClass().

Try this:

$(function($) {
  $(document).on('click', '.box-btn', function(event) {
    $(this).find('.glyphicon').toggleClass('red').toggleClass('glyphicon-heart-empty glyphicon-heart');
  });
});
.box-btn {
  float: left;
  background: transparent;
  font-size: 53px;
  color: #4D4E56;
  font-weight: 300;
  cursor: pointer;
  border-radius: 2px;
  line-height: 0.5;
  border: none;
  outline: none;
}
.glyphicon {
  transition: color .3s linear;
}  
.box-btn .red {
  color: red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="submit" class="box-btn"><span class="glyphicon glyphicon-heart-empty" aria-hidden="true"></span>
</button>

Upvotes: 4

Related Questions