JSFiddle - React, Tailwind, and code Playground

by ten1seven

HTML

<script type="text/javascript">document.write('<style type="text/css">#div1, #div2 { display: none; }</style>');</script>

<ul>
    <li><a href="#div1">Show Div 1</a></li>
    <li><a href="#div2">Show Div 2</a></li>
</ul>

<div id="div1">
    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer imperdiet pede. 
    Morbi ultricies eros. Aenean augue nisi, rhoncus ut, porttitor in, ultricies eget, 
    ipsum. Vivamus imperdiet semper risus.
    </p>
</div><!-- /div1 -->

<div id="div2">
    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer imperdiet pede. 
    Morbi ultricies eros. Aenean augue nisi, rhoncus ut, porttitor in, ultricies eget, 
    ipsum. Vivamus imperdiet semper risus.
    </p>
</div><!-- /div2 -->

CSS

#div1, #div2 { margin: 10px 0; padding: 10px; }
#div1 { background: #eee; }
#div2 { background: #eef; }

JavaScript

// Function to execute when links are clicked
clickHandler = function() {
    var thisID = this.href.split("#")[1];
        
    // Check the display status and toggle accordingly
    if (document.getElementById(thisID).style.display === "block") {
        this.innerHTML = "Show Div " + thisID.substring(3);
        document.getElementById(thisID).style.display = "";
    } else {
        this.innerHTML = "Hide Div " + thisID.substring(3);
        document.getElementById(thisID).style.display = "block";
    }
        
    return false;
};

// Find links and bind event handler
var links = document.getElementsByTagName("a");
for (i = 0; i <= (links.length-1); i++) {
    links[i].onclick = clickHandler;
}