JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
 <div class="acc-container">
    <div class="acc-btn">
        <h1 class="selected">Módulo 1</h1></div>
    <div class="acc-content open">
      <div class="acc-content-inner">
        <p>Fechas: 18/08/2014 ao 18/09/2014</p>
       
      </div>
    </div>
    
    <div class="acc-btn">
      <h1>Módulo 2</h1></div>
    <div class="acc-content">
      <div class="acc-content-inner">
        <p>Fechas: 19/09/2014 ao 18/12/2014</p>
      </div>
    </div>
    
    <div class="acc-btn">
      <h1>Módulo 3</h1></div>
    <div class="acc-content">
      <div class="acc-content-inner">
        <p>Fechas: 19/12/2014 ao 18/04/2015</p>
      </div>
    </div>
    
    <div class="acc-btn">
      <h1>Módulo 4</h1></div>
    <div class="acc-content">
      <div class="acc-content-inner">
        <p>Fechas: 19/04/2015 ao 18/07/2015</p>
      </div>
    </div>
    <div class="acc-btn">
      <h1>Módulo 5</h1></div>
    <div class="acc-content">
      <div class="acc-content-inner">
        <p>Fechas: 19/07/2015 ao 18/08/2015</p>
      </div>
    </div>
    </div>

CSS

.acc-content-inner { display: none }

JavaScript

$(document).ready(function(){
  var animTime = 300,
      clickPolice = false;
  
  $(document).on('touchstart click', '.acc-btn', function(){
    if(!clickPolice){
       clickPolice = true;
      
      var currIndex = $(this).index('.acc-btn'),
          targetHeight = $('.acc-content-inner').eq(currIndex).outerHeight();
      
      $('.acc-content-inner').eq(currIndex).css("display","block");
   
      //$('.acc-btn h1').removeClass('selected');
      //$(this).find('h1').addClass('selected');
      
      $('.acc-content').stop().animate({ height: 0 }, animTime);
      $('.acc-content').eq(currIndex).stop().animate({ height: targetHeight }, animTime);

      setTimeout(function(){ clickPolice = false; }, animTime);
    }
    
  });
  
});