JSFiddle - React, Tailwind, and code Playground

by Douglas Santos

HTML

<div id="lateral">

  <div class="teste">
  <a href="" class="aprendiz">pagina 1</a> 
      <div class="info">
        conteúdo da página 1<br>
        conteúdo da página 1<br>
        conteúdo da página 1<br>
      </div>
  </div>  

  <div class="teste">
    <a href="" class="aprendiz">pagina 2</a> 
    <div class="info">
      conteúdo da página 2 <br>
      conteúdo da página 2 <br>
      conteúdo da página 2 <br>
    </div>
  </div>
  <div class="teste">
    <a href="" class="aprendiz">pagina 3</a> 
    <div class="info">
      conteúdo da página 3<br>
      conteúdo da página 3<br>
      conteúdo da página 3<br>
    </div>
  </div>

  <div class="teste">
    <a href="" class="aprendiz">pagina 4</a> 
    <div class="info">
      conteúdo da página 4<br>
      conteúdo da página 4<br>
      conteúdo da página 4<br>
    </div>
  </div> 
</div>

CSS

*{margin:0; padding:0; font-family:Verdana, Tahoma ;}

body{ background-color:#CCC;}

div#lateral{
	margin:40px;
	max-width:240px;
	background-color:#999;
	border-radius:5px;
	padding:10px;
	}
	
div.teste{
	max-width:240px;
	}
	
a.aprendiz:link,
a.aprendiz:visited{ 
	font-size:16px; 
	font-weight:bold;
	margin-bottom:4px;
	background-color:#89B889;
	padding:10px 10px 10px 10px;
	display:block;
	text-decoration:none;
	}
	
div.info{
	max-width:240px;
  display: none;
	overflow: hidden;
	background-color:#FFF;
	padding-left:10px;
	}

ul{ padding:10px;}

JavaScript

window.onload = function() {
    var abas = document.querySelectorAll('.teste'); 
    abas.forEach(function(el){
        el.addEventListener('click', controlaAcordion, false); 
    });
};

function controlaAcordion(e) {
    var conteudoAbas = document.querySelectorAll('.info');
    conteudoAbas.forEach(function(ele){
       ele.style.display = 'none';
    });
    this.querySelector('.info').style.display = 'block';
    e.preventDefault();
}