JSFiddle - React, Tailwind, and code Playground

by ggChris

HTML

<div class="teamContent">
                <!-- Codrops top bar -->

    <div class="accordion" id="myAccordion">
            
       <div class="panel panel-default">    
          <div class="panel-heading"  role="tab" id="headingOne">
            <h4 class="panel-title" id"#nav2">
                  <a role="button" data-toggle="collapse" class="active" data-target="#collapsible-1" data-parent="#myAccordion" aria-expanded="false" aria-controls="closeOne">
                    Management & Construction
                  </a>&nbsp;&nbsp;

                  <a role="button" data-toggle="collapse" data-target="#collapsible-3" data-parent="#myAccordion" aria-expanded="false" aria-controls="closeOne">
                    Process
                  </a>&nbsp;&nbsp;

                  <a role="button" data-toggle="collapse" data-target="#collapsible-2" data-parent="#myAccordion" aria-expanded="false" aria-controls="closeOne">
                    Engineering
                  </a>&nbsp;&nbsp;
                  
                  <a role="button" data-toggle="collapse" data-target="#collapsible-4" data-parent="#myAccordion" aria-expanded="false" aria-controls="closeOne">
                    Specifics
                  </a>              
            </h4>  
         </div> 
         <!-- ::::: Management & Construction :::: -->
          <div id="collapsible-1" class="collapse in">
                <div  class="main">
                  <ul id="og-grid" class="og-grid"> 
                    <li> 
                      <img src="http://www.businessmagazine.it/immagini/wifi-free.jpeg">
                    </li> 
                    <li> 
                      <img src="http://www.businessmagazine.it/immagini/wifi-free.jpeg">
                    </li> 
                     <li> 
                      <img src="http://www.businessmagazine.it/immagini/wifi-free.jpeg">
                    </li> 
                    <li> 
                      <img...

CSS

#nav2  a:active,
#nav2  a:hover,
#nav2  a:focus {
  color: #fff; /* sergio #555 */
  background-color: #000 !important; /* sergio #e7e7e7 */
  font-weight: bold;  
}
a{
    cursor: pointer !important;
}
.active { color:#ccc !important;}
.panel img{
  width: 80px;
  height: auto;
}

.og-grid {
	list-style: none;
	padding: 20px 0;
	margin: 0 auto;
	text-align: center;
	width: 100%;
}


.og-grid li > a,
.og-grid li > a img {
	border: none;
	outline: none;
	display: block;
	position: relative;
}

.og-grid li {
	display: inline-block;
	margin: 10px 5px 0 5px;
	vertical-align: top;
	height: 100;
}

JavaScript

$("#headingOne a").on("click", function(){
       $(this).addClass("active");
       $("#headingOne").find('.active').not(this).removeClass("active");
});