JSFiddle - React, Tailwind, and code Playground

by DannyEnglander

HTML

<div id="hs"> 
    <span id='up_arrow'>Show</span>
    <span id='down_arrow'>Hide</span>
</div>

<div id="view">
   <ul>
    <li>text here</li>
    <li>text here</li>
    <li>text here</li>
    <li>text here</li>
    <li>text here</li>
    <li>text here</li>
   </ul>
</div>

CSS

#hs{ cursor: pointer; }
    #down_arrow{ display: none; }
    #view{display: none};

JavaScript

$(document).ready(function() {

    $("#hs").toggle(
        function(){
            $("#up_arrow").hide();$("#down_arrow").show("slow");
            $("#view").show("fast");
        },
        function(){
            $("#down_arrow").hide();$("#up_arrow").show("slow");
            $("#view").hide("slow");
        }
    );


});