JSFiddle - React, Tailwind, and code Playground

HTML

<div class="central">

     <div class="acc-container">
    <div class="acc-btn">
      <h1 class="selected">Módulo 1</h1></div>
    <div class="acc-content">
      <div class="acc-content-inner">
        <p>Datas: 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>Datas: 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>Datas: 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>Datas: 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>Datas: 19/07/2015 ao 18/08/2015</p>
      </div>
    </div>
    </div>
</div>

CSS

<style>
@import url(http://fonts.googleapis.com/css?family=Lato:400,700);

.clear{
	clear:both;
}

 .acc-container {
  width:90%;
  margin:30px auto 0 auto;
  -webkit-border-radius:8px;
  -moz-border-radius:8px;
  -o-border-radius:8px;
  border-radius:8px;
  overflow:hidden;
}

.acc-btn { 
  width:100%;
  margin:0 auto;
  padding:10px 10px;
  cursor:pointer;
  background:#6f7a83;
  border-bottom:1px solid #2C3E50;
}

 .acc-content {
  height:0px;
  width:100%;
  margin:0 auto;
  overflow:hidden;
  background:#dfe3ed;
}

 .acc-content-inner {
  padding:15px;

}

 .open {
  height: auto;
}

.acc-container h1 {
  font:700 20px/26px 'Lato', sans-serif;
  color:#ffffff;
}

.acc-container p, .acc-container a { 
  font:400 16px/24px 'Lato', sans-serif;
  color:#000;
  text-align:justify;
}

.acc-container a{
	background-color: #6f7a83;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    float: right;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    text-transform: uppercase;

}

 .selected {
  color:#1ABC9C;
}

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-btn h1').removeClass('selected');
      $(this).find('h1').addClass('selected');

      var currCont = $('.acc-content').eq(currIndex);
      if(currCont.css("height")=="0px")
          $('.acc-content').eq(currIndex).stop().animate({ height: targetHeight }, animTime);
      else
          $('.acc-content').eq(currIndex).stop().animate({ height: 0 }, animTime);

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