JSFiddle - React, Tailwind, and code Playground

by letanure

HTML

<div class="conteudo">
	<div class="infos">
		<div class="open_div"> 
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
			<button class="show-more"> exibir mais</button>
			<div class="hidden_div"> 
				 Suscipit, facilis, quam impedit cupiditate molestias beatae magni eos sed autem nostrum laborum hic quia id? Voluptatum, rem vitae dolore obcaecati! Beatae.
			</div><!--hiden_div-->
		</div><!--open_div-->
	</div><!--infos-->
	<div class="infos">
		<div class="open_div"> 
            Suscipit, facilis, quam impedit cupiditate molestias
			<button class="show-more"> exibir mais</button>
			<div class="hidden_div"> 
				 beatae magni eos sed autem nostrum laborum hic quia id? Voluptatum, rem vitae dolore obcaecati! Beatae.
			</div><!--hiden_div-->
		</div><!--open_div-->
	</div><!--infos-->
</div><!--conteudo-->

CSS

.hidden_div{
    display: none;
}
.infos{
    padding: 10px;
    margin: 10px;
    border-bottom: 1px solid #ddd;
}
.show-more{
    width: 50px;
    height: 50px;
    border-radius: 50px;
    background-color: #fff;
    border: 2px solid #ddd;
    font-size: 40px;
    line-height: 35px;
    color: #fff;
    cursor: pointer;
}
.show-more:before{
    content: '+';
    color: #ccc;
}
.show-more.minus:before{
    content: '-';
}

JavaScript

$('.show-more').on('click', function(){
    $(this).toggleClass('minus');
    $(this).next('.hidden_div').toggle()
})