JSFiddle - React, Tailwind, and code Playground

by Frederic Suau

HTML

<div id="infos_pratiques">
  
   <div id="infos-principal">
   
       <span class="prem_ligne">
    <div class="logo">Horaires et Tarifs</div>
    <h2><img src="http://www.salon-bioharmonies.com/images/Icones/horaires_et_tarifs.png" alt="horloge" width="80" height="80" /></h2>
       </span>
	   
       <span class="prem_ligne">
    <div class="logo">Comment venir ?</div>
    <h2><img src="http://www.salon-bioharmonies.com/images/Icones/comment_venir.png" alt="map maker" width="80" height="80" /></h2>
       </span>
	   
       <span class="prem_ligne">
    <div class="logo">Magasins Partenaires</div>
    <h2><img src="http://www.salon-bioharmonies.com/images/Icones/magasins_bio_partenaires.png" alt="coeur" width="80" height="80" /></h2>
       </span>
	   
    </div>
	
	 <div id="infos-secondair">
   
       <span class="deuxiem_ligne">
    <div class="logo">Nous contacter</div>
    <h2><img src="http://www.salon-bioharmonies.com/images/Icones/nous_contacter.png" alt="dialogue" width="80" height="80" /></h2>
       </span>
	   
       <span class="deuxiem_ligne">
    <div class="logo">Invitation gratuite</div>
    <h2><img src="http://www.salon-bioharmonies.com/images/Icones/invitation_gratuite.png" alt="invitation" width="80" height="80" /></h2>
       </span>
	
	</div>
	
  <div class="content">
    <p>Le salon est ouvert de 10h30 à 19h30 sauf le dimanche femeture à 18h00</p>
    <p>Voici les tarifs d'entrées au salon Bio&Harmonies 2014</p>
  </div>
  
  
  
  <div class="content">
    <p>Comment venir ?</p>
	<p>Pour venir au salon Bio&Harmonies 2014 veuillez suivre les instructions...
  </div>
  
  
  
  <div class="content">
    <p>Voici la liste des magasins partenaires du salon Bio&Harmonies 2014 </p>
  </div>
  
  <div class="content">
    <p>Voici comment nous contacter</p>
    <p>remplissez le formulaire ci-dessous</p>
  </div>
  
  
  
  <div class="content">
    <p>Pour recevoir votre invitation il suffit de nous envoyer une demande par mail à </p>
 ...

CSS

#infos-principal, #infos-secondair {
    max-width: 100%;
    text-align: center;
}
.prem_ligne, .deuxiem_ligne {
    display: inline-block;
    padding: 5%;
    font: bold 13px Helvetica, Arial, sans-serif;
    color: #999999;

  }
  #infos_pratiques H2 {
    display : inline-block;
    color: black;
    cursor: pointer;
    font: 16px Helvetica, Arial, sans-serif;
    line-height: 16px;
    margin: 0 0 4px 0;
    padding: 3px 5px 1px;
  }
  #infos_pratiques .content {
    background-color: #F4F5F5;
  }
  #infos_pratiques .content p {
    margin: 0.5em 0;
    padding: 0 6px 8px 6px;
  }

JavaScript

window.addEvent('domready', function(){
  new Fx.Accordion($('infos_pratiques'), '#infos_pratiques h2', '#infos_pratiques .content', {
    display: 2,
    show: true,
      alwaysHide: true,
});
});