JSFiddle - React, Tailwind, and code Playground

by Alex

HTML

<section>
    <a href="#open1" class="showto">open 1</a>
    <a href="#open2" class="showto">open 2</a>
</section>
<section>
    <div id="open1" class="hide"> caixa 1</div>
    <div id="open2" class="hide"> caixa 2</div>    
</section>

CSS

a{
    margin: 10px;
    text-decoration: none;
    background: #a9a9a9;
    color:#fff;
    padding: 5px;
}

.hide{
    display: none;
}

div{
    padding: 50px 100px;
    margin:10px;
    float:left;
}
#open1{ background: yellow; }
#open2{ background: green; }

JavaScript

$(function(){	
// Alteracao de endereco
	$('.showto').on('click', function(){
		var to = $(this).attr('href'); 
		$(to).fadeIn();
		return false;
	});
});