JSFiddle - React, Tailwind, and code Playground

by JonathonMA

HTML

<ul>
    <li><a id="hide_container" href="#">Hide container</a></li>
    <li><a id="show_container" href="#">Show container</a></li>
    <li><a id="hide_elements" href="#">Hide elements</a></li>
    <li><a id="show_elements" href="#">Show elements</a></li>
</ul>

<ul>
    <li id="1">Hidden Container
        <ul class="hide">
            <li>hide()</li>
        </ul>
        <ul class="hide0">
            <li>hide(0)</li>
        </ul>
        <ul class="hide1">
            <li>hide(1)</li>
        </ul>
    </li>
</ul>

<ul>
    <li>Shown Container
        <ul class="hide">
            <li>hide()</li>
        </ul>
        <ul class="hide0">
            <li>hide(0)</li>
        </ul>
        <ul class="hide1">
            <li>hide(1)</li>
        </ul>
    </li>
    <li></li>
</ul>

JavaScript

$("#hide_container").click(function() {
    $("#1").hide();
});
$("#show_container").click(function() {
    $("#1").show();
});
$("#hide_elements").click(function() {
    $(".hide").hide();
    $(".hide0").hide(0);
    $(".hide1").hide(1);
});
$("#show_elements").click(function() {
    $(".hide").show();
    $(".hide0").show(0);
    $(".hide1").show(1);
});