JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="linguagens">
<div class="titulo">
<h2>Linguagens</h2>
<div class="expand">
<div class="mais">mais</div>
<div class="menos">menos</div>
</div>
</div>
<div class="conteudo">
<p>exemplo<br>exemplo<br>exemplo<br>exemplo</p>
</div>
</div>
<div id="codigos">
<div class="titulo">
<h2>Codigos</h2>
<div class="expand">
<div class="mais">mais</div>
<div class="menos">menos</div>
</div>
</div>
<div class="conteudo">
<p>exemplo<br>exemplo<br>exemplo<br>exemplo</p>
</div>
</div>
<div id="frameworks">
<div class="titulo">
<h2>Frameworks</h2>
<div class="expand">
<div class="mais">mais</div>
<div class="menos">menos</div>
</div>
</div>
<div class="conteudo">
<p>exemplo<br>exemplo<br>exemplo<br>exemplo
</div>
</div>
CSS
.mais,
.menos {
cursor: pointer;
}
.menos,
.conteudo {
display: none;
}
JavaScript
$(".mais").click(function(e) {
$(this).hide();
$(this.parentElement.children[1]).fadeIn();
$(this.parentElement.parentElement.parentElement.children[1]).css("max-height", "60rem");
$(this.parentElement.parentElement.parentElement.children[1]).fadeIn();
});
$(".menos").click(function() {
$(this).hide();
$(this.parentElement.parentElement.parentElement.children[1]).hide();
$(this.parentElement.children[0]).fadeIn();
});