JSFiddle - React, Tailwind, and code Playground

by Arnaud

HTML

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<div id="boxGroup-1-D" class="boxes">
  <h2 class="h2-1 h2-o" style="background:#fff"><img src="images/ico/ico-contrat-sante.png" /> Mon contrat santé</h2><h3 class="h3-1" style="background:#fff"><span class="span-1" >-</span></h3>
  <div class="pAccordeon onglet-1" style="display:block">
   <ul>
   
   <li><span class="txt-gras">Compémentaire santé</span> <br />
   		<a href="#" >Voir mes garanties</a></li>
   
      <li><span class="txt-gras">3 bénéficiares</span> <br />
   		<a href="#" >Voir mes bénéficiaires</a></li>
        
           <li><span class="txt-gras">19€ par mois</span> <br />
   		<a href="#" >Voir mes informations</a></li>
        
   </ul>
  </div>
  <h2 class="h2-2  h2-o  avecContrat" ><img src="images/ico/ico-contrat-auto.png" /> Mon contrat auto</h2><h3 class="h3-2"><span class="span-2" >+</span></h3>
  <div class="pAccordeon onglet-2" style="display:none">
  
  
  
    <ul>
   
   <li><span class="txt-gras">Compémentaire santé</span> <br />
   		<a href="#" >Voir mes garanties</a></li>
   
      <li><span class="txt-gras">xxxx xxxxxx</span> <br />
   		<a href="#" >xxx xxxxxx85206c;</a></li>
        
           <li><span class="txt-gras">29€ par mois</span> <br />
   		<a href="#" >Voir mes informations</a></li>
        
   </ul>
   
   </div>
   <h2 class="h2-3  h2-o   avecContrat" ><img src="images/ico/ico-contrat-prevoyance.png" /> Contrat prévoyance</h2><h3 class="h3-3"><span class="span-3" >+</span></h3>
  <div class="pAccordeon onglet-3" style="display:none">
  </div>
 
   <h2 id="H2O" class=" h2-o sansContrat"><img src="images/ico/ico-contrat-prevoyance.png" /> SANSCONTRAT</h2><h3><a href="#" > <img src="images/ico/ico-fleche-blanche.png" width="16" height="16" alt=""/></a></h3>
    </div>

CSS

#boxGroup-1
{
 width:100%; 
  height:100%;
  float:left;
}

#boxGroup-1-D h2 
{
width:540px;
  float:left;
  background:;
  height:30px;
  margin:0;
  padding:10px;
  background:#ccc;
}

.actif
{
 background:#000;

}
#boxGroup-1-D h3
{
width:20px;
  float:right;
padding:10px;
  height:30px;  background:#ccc;

}
#boxGroup-1-D h3 span
{
display:block;
  background:#aaa;
  border-radius:1000px;
  font-size:1.5em;
  font-family:gudeaBold;
  color:#fff;
  text-align:center;
  width:25px;
  height:25px;
  line-height:20px;
  cursor:pointer;
}


#boxGroup-1 p
{
height:90px;
clear:both;
}
#boxGroup-1-G
{
 width:300px; 
  height:220px;
}


#boxGroup-1-D
{
 	width:600px;
  margin: 0 0 0 30px;
  height:190px;
  padding:0;
}

#boxGroup-1-D-B
{
 	width:582px;
  margin: 0 0 0 30px;
  height:30px;
  background:#3245ae;
  color:#fff;
border:none;
}

#boxGroup-1-D-B h2
{
  float:left;
width:500px;
  color:#fff;
}

#boxGroup-1-D-B h3
{width:20px;
	float:right;
  margin:10px 0;
}

JavaScript

// ONGLETS TYPE CONTRAT ------------------------------------------------------
 /* $(document).ready(function(){
if  ($('#H2O').class() == "sansContrat") {
           $('#H2O').css("display","none");

            }
  });*/
  
  
  $( '#H2O' ).toggleClass(function() {
  if ( $( this ).is( ".sansContrat" ) ) {
   $('#H2O').css("display","none");
  }
});


  $( '#H2O' ).toggleClass(function() {
  if ( $( this ).is( ".avecContrat" ) ) {
   $('#H2O').css("display","block");
  }
});