-1

How do i make a panel-heading background color to be different when it clicked. I have tried using .panel-heading::active but it is not working.

Chidi Nkwocha
  • 85
  • 1
  • 9

1 Answers1

0

Can u do this by jQuery. For example: imagine that your panel has class="changecolor", then you can put in your jQuery something like this:

https://jsfiddle.net/luciocamilo/9xbtkjv4/

<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<div class="panel panel-primary">

  <div class="panel-heading changecolor">
    Test
  </div>
  <div class="panel-body">
  Lorem ipsum dolor sit amet
  </div>
</div>
</body>
<script>
$(document).ready(function(){
$('.changecolor').click(function() {
      $(this).css('background-color','#EE178C')
    });
});
 </script>
luciocamilo
  • 80
  • 7