JSFiddle - React, Tailwind, and code Playground

by Amarnath Shenoy

HTML

<div id="wrap">
    <p>This text is visible, but there is more.<a href="#" id="example-show" class="showLink" ><br/><br/>See more >></a>
    </p> 
    <div id="example-hidden" class="more">
        <p>Congratulations! You've found the magic hidden text! Clicking the link below
            will hide this content again.</p>
        <p><a href="#" id="example-hide" class="hideLink" 
            >Hide this content >></a></p>
    </div>
</div>
<div id="wrap">
    <p>This text is visible, but there is more.<a href="#" id="example1-show" class="showLink" ><br/><br/>See more >></a>
    </p> 
    <div id="example1-hidden" class="more">
        <p>Congratulations! You've found the magic hidden text! Clicking the link below
            will hide this content again.</p>
        <p><a href="#" id="example1-hide" class="hideLink" 
            >Hide this content >></a></p>
    </div>
</div>

<div id="wrap">
    <p>This text is visible, but there is more.<a href="#" id="example2-show" class="showLink" ><br/><br/>See more >></a>
    </p> 
    <div id="example2-hidden" class="more">
        <p>Congratulations! You've found the magic hidden text! Clicking the link below
            will hide this content again.</p>
        <p><a href="#" id="example2-hide" class="hideLink" 
            >Hide this content >></a></p>
    </div>
</div>

CSS

.more {
	display:none; 
}
a.showLink, a.hideLink {
	text-decoration: none;
    color: #36f;
}

JavaScript

$('.showLink').bind('click',function(e){
   var obj = $(this).attr('id');
    
    var name = obj.replace("-show","-hidden");
$('#'+name).css('display', 'inline-block'); 

});
$('.hideLink').bind('click',function(e){
   var obj = $(this).attr('id');
    
    var name = obj.replace("-hide","-hidden");
$('#'+name).css('display', 'none'); 

});