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" 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  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  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 class="sansContrat" style="display:none"><img src="images/ico/ico-contrat-prevoyance.png" /> Contrat prévoyance</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 ------------------------------------------------------
  
  
  // LIGNE 1 CONTRAT SANTE
   $(".h3-1").click(function()
  {
  
    if ($('.span-1').html() === "+") {
            $('.span-1').html("-");
			 $('.span-2').html("+");
			  $('.span-3').html("+");
            }
			
			
		
	  
	  $(".h3-1").css({'background':'#fff'});
    $(".h2-1").css({'background':'#fff'});
    
    
     $(".h3-2").css({'background':'#ddd'});
    $(".h2-2").css({'background':'#ddd'});
    
   $(".h3-3").css({'background':'#ddd'});
    $(".h2-3").css({'background':'#ddd'});  
        
	    $(".pAccordeon").hide();
	
		
		
    $(this).next().fadeToggle(600);
  });
  
  
  // LIGNE 2 CONTRAT AUTO
   $(".h3-2").click(function()
  {
  
       if ($('.span-2').html() === "+") {
            $('.span-2').html("-");
			 $('.span-1').html("+");
			 	$('.span-3').html("+");
            }
	  
	  $(".h3-2").css({'background':'#fff'});
    $(".h2-2").css({'background':'#fff'});
    
    
     $(".h3-1").css({'background':'#ddd'});
    $(".h2-1").css({'background':'#ddd'});
    
      $(".h3-3").css({'background':'#ddd'});
    $(".h2-3").css({'background':'#ddd'});
        
	    $(".pAccordeon").hide();
	
		
		
    $(this).next().fadeToggle(600);
  });
  
  
  // LIGNE 3 CONTRAT PREVOYANCE
   $(".h3-3").click(function()
  {
  
       if ($('.span-3').html() === "+") {
            $('.span-3').html("<img src=\"images/ico/ico-contrat-auto.png\" >");
			 $('.span-2').html("+");
			 $('.span-1').html("+");
            }
	  
	  $(".h3-3").css({'background':'#fff'});
    $(".h2-3").css({'background':'#fff'});
    
    
     $(".h3-1").css({'background':'#ddd'});
    $(".h2-1").css({'background':'#ddd'});
    
       $(".h3-2").css({'background':'#ddd'});
    $(".h2-2").css({'background':'#ddd'});
        
	    $(".pAccordeon").hide();
	
		
		
    $(this).next().fadeToggle(600);
  });