JSFiddle - React, Tailwind, and code Playground

by kedar2a

HTML

<figure onclick="showHide('show');" id="show">
	<img src="http://bioinformatica.upf.edu/2009/projectes09/Ex/resultats/seli/SelI_human_pfam_files/showButton.png" alt="An awesome picture">	
	<figcaption>Show</figcaption>
</figure>
    
<figure onclick="showHide('hide');" id="hide" style="display:none;">
	<img src="http://tweetingmeeting.com/images/hide-button.png">	
	<figcaption>Hide</figcaption>
</figure>


<div id="cont_1" style="display:none;">
	<p>just some stuff for an example<br/>
		content will be placed on this div</p>
	<p>I have set a default ID string, but don't know If I will need it at all</p>
</div>

    
<script>
function showHide(activity)
{
    show = document.getElementById("show");
    hide = document.getElementById("hide");
    content = document.getElementById("cont_1");
    
    // a.style.display = "none";
    if(activity == "show")
    {
        show.style.display = "none";
        hide.style.display = "block";
        content.style.display = "block";
    }
    else if(activity == "hide")
    {
        show.style.display = "block";
        hide.style.display = "none";
        content.style.display = "none";
    }
}
</script>