JSFiddle - React, Tailwind, and code Playground

by Luis Fernando Mangia

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

<div id="div1" class="targetDiv">Lorum Ipsum1 <span class="fechar">fechar</span></div>
<div id="div2" class="targetDiv">Lorum Ipsum2 <span class="fechar">fechar</span></div>
<div id="div3" class="targetDiv">Lorum Ipsum3 <span class="fechar">fechar</span></div>
<div id="div4" class="targetDiv">Lorum Ipsum4 <span class="fechar">fechar</span></div>


<div class="buttons">

<a  class="showSingle" target="1">Div 1</a>
<a  class="showSingle" target="2">Div 2</a>
<a  class="showSingle" target="3">Div 3</a>
<a  class="showSingle" target="4">Div 4</a>
</div>

CSS

.targetDiv{display:none;}
.fechar{color:red;}

JavaScript

jQuery(function(){
         //jQuery('#showall').click(function(){
           //    jQuery('.targetDiv').show();
        //});
        jQuery('.showSingle').click(function(){
              jQuery('.targetDiv').hide();
              jQuery('#div'+$(this).attr('target')).show(500).fadeIn();
              //Query('.fechar').hide(500).fadeIn();
        });
        jQuery('.fechar').click(function(){ 
        	jQuery('#div'+$(this).attr('target')).hide(500);
        });
        //$('.fechar').click(function(){
         // $(".targetDiv").slideToggle();
       // });
});