Bootstrap: Change Color of Panel Heading onClick

Question

Hi I gave myself a crash course in bootstrap last night and I'm having a lot of fun with it. I found online a collapsible panel that works really well for what I am hoping to achieve in my navbar. However I want the background color of the panel heading to change when expanded. I am not familiar enough with the inner workings of bootstrap yet to noodle it out on my own (soon! I hope). Code in question is below:

            <div class="panel-group minmarg" id="accordion">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                        OPI<b class="caret"></b>
                    </a>
                </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse">
                <div class="panel-body minmarg">
                    <ul class="nav nav-pills nav-stacked pill-trngtheme minmarg">
                        <li role="presentation"><a href="#">OPI Main Site</a>
                        </li>
                        <li role="presentation" class="active"><a href="#">Training</a>
                        </li>
                        <li role="presentation"><a href="#">Procedures</a>
                        </li>
                        <li role="presentation"><a href="#">Corrective Action</a>
                        </li>
                        <li role="presentation"><a href="#">Human Performance Improvement</a>
                        </li>
                        <li role="presentation"><a href="#">LEAN Management</a>
                        </li>
                        <li role="presentation"><a href="#">Coduct of Operations</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

Answer 1

AngularJR answer is correct but I found it a little hard to understand with my limited knowledge of css and non-existent knowledge of jQuery. Plus I am using react and so tweaking DOM elements after they have been rendered wasn't a good approach for me.

---

Core Principle

The basic principle of what is going on is that an extra class tag is being added to the html element:

So

<div class="panel-heading">...</div>

becomes

<div class="panel-heading on">...</div>

It doesn't really matter how you add in these extra classes, jQuery ($) is just one option.

Different css rules can now be applied to these two divs using the css selectors:

.panel-heading {
    background-color:greenyellow;
}  

and

.panel-heading.on {
    background-color:dodgerblue;
}

respectively.

Notice that there is no space between .panel-heading and .on. See the following stack overflow question for more information: What's the difference between CSS classes .foo.bar (without space) and .foo .bar (with space).

---

My aside about solving the problem when using react

However in the case of using react-bootstrap the "panel-heading" div is created automatically by the tag <Panel> and the <div class="panel-heading"> element can't be searched for and accessed after it has been rendered (the react life cycle is weird). So no extra classes can be added to it.

So the extra class, "on", needs to be added to a parent element of the panel-heading div:

html (or .jsx):

<div class="on">
    <Panel header="My Title">...STUFF...</Panel>
</div>

results in a DOM that looks like this (slightly simplified):

<div class="on">
   <div class="panel">
       <div class="panel-heading">
           My Title
       </div>
       <div class="panel-body">
           .....STUFF.....
       </div>
   </div>
</div>

There is now an outer div with the "on" class and the "panel-heading" div is contained within it.

The panel-heading div can now be styled in css using the following selectors:

.panel-heading {
    background-color:greenyellow;
}  

and

.on .panel-heading {
    background-color:dodgerblue;
}

Notice how the .on selector is now before the .panel-heading selector and there is also a space between the two selectors; this is because the element with the .on class is now a ancestor of the element with the .panel-heading class.

Note: Adding the extra "on" class directly to <Panel> and not enclosing the panel in an extra div would work similarly.

Now the "onClick" handler can change the class of the parent element to affect the styling of the panel-heading, which is much easier than searching the DOM for the correct "panel-heading div" (IMHO). And crucially, in my case of using react, this "on" class can be specified directly for an element when calling the render routine.

Answer 2

Webforwork, Hi there.
How about something like this and change the class, using toggleclass.

CSS

 .panel-clr {
        background-color:greenyellow;
    }     
 .panel-clr.on {
        background-color:dodgerblue;
    }

JS

$( function() {
  $('.panel-clr').click( function() {
      $(this).toggleClass('on');
} )
}); 

Hope this helps you.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>Starter Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<style>
body {
  padding-top: 50px;
}
.spacer {
  margin-top: 2%;
  margin-bottom: 2%;
}    
.block {
  height: 440px;
}  

.panel-clr {
    background-color:greenyellow;
} 
    
.panel-clr.on {
    background-color:dodgerblue;
}
  
</style>

</head>

<body>

    <nav class="navbar navbar-inverse navbar-fixed-top ">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand " href="#">Project name</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

<div class="container col-lg-12 spacer"></div>
<div class="container col-lg-12">

<div class="col-lg-10 col-md-10 col-sm-10 col-xs-10 bg-info block">
         <div class="panel-group minmarg" id="accordion">
        <div class="panel ">
            <div class="panel-heading panel-clr">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                        OPI<b class="caret"></b>
                    </a>
                </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse">
                <div class="panel-body minmarg">
                    <ul class="nav nav-pills nav-stacked pill-trngtheme minmarg">
                        <li role="presentation"><a href="#">OPI Main Site</a>
                        </li>
                        <li role="presentation" class="active"><a href="#">Training</a>
                        </li>
                        <li role="presentation"><a href="#">Procedures</a>
                        </li>
                        <li role="presentation"><a href="#">Corrective Action</a>
                        </li>
                        <li role="presentation"><a href="#">Human Performance Improvement</a>
                        </li>
                        <li role="presentation"><a href="#">LEAN Management</a>
                        </li>
                        <li role="presentation"><a href="#">Coduct of Operations</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div> 
      
</div>
        
    </div><!-- /.container -->


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    
<script> 
    
$( function() {
  $('.panel-clr').click( function() {
      $(this).toggleClass('on');
} )
});    
</script> 
    
</body>
</html>

Answer 3

You can reference to document

Here code for you:

$(".collapse").on('shown.bs.collapse',function(){
     // change background when expanded

});
$(".collapse").on('hidden.bs.collapse',function(){
     // change background when hide
});