JSFiddle - React, Tailwind, and code Playground

HTML

<a onclick="document.getElementById('div_name2').style.display='';return false;" 
href="" style="text-decoration:none;border-bottom:1px dotted blue;">
Show more...</a>
<br/>
<div id="div_name2" style="display:none;margin:15px 15px 0px 0px;padding:5px;border:1px solid #aaa;">
This is more information placed in our hidden div.  
When you click on the "hide" link this DIV area will disappear:  
<a onclick="document.getElementById('div_name2').style.display='none';return false;" href="" 
style="text-decoration:none;border-bottom:1px dotted blue;">hide</a>
</div>

<br/>
<a onclick="document.getElementById('div_name3').style.display='';return false;" 
href="" style="text-decoration:none;border-bottom:1px dotted blue;">
Show more...</a>
<br />
<div id="div_name3" style="display:none;margin:15px 15px 0px 15px;padding:5px;border:1px solid #aaa;">
This is more information placed in our hidden div.  
When you click on the "hide" link this DIV area will disappear:  
<a onclick="document.getElementById('div_name3').style.display='none';return false;" href="" 
style="text-decoration:none;border-bottom:1px dotted blue;">hide</a>
</div>