JSFiddle - React, Tailwind, and code Playground

HTML

<div onmouseup='fncShowHideList()' id='idClickIt' style='text-align: center; background-color: lightgrey'>Show/Hide List</div>

<div id='myList' class='Show'>
    <ul>
        <li>Item One</li>
        <li>Item Two</li>
        <li>Item Three</li>
        <li>Item Four</li>
    </ul>
</div>

<div>
    <p>paragragh One</p>
    <p>Sentence Two</p>
    <label id='idMyLabel' class='nothing'>Initial Content</label>

</div>

CSS

.Show {width: 20%}
.Hide {display:none; width: 0%}

#idClickIt {cursor: pointer; color: blue; border: 1px solid; width: 20%}

.bigRed {color: red; font-size: 500%}
.smallBlue {color: blue; font-size: 80%}

JavaScript

window.fncShowHideList = function() {
    //alert('it ran: ');
    if (document.getElementById('myList').getAttribute('class') === 'Show') {
        document.getElementById('myList').setAttribute('class', 'Hide');
        document.getElementById('idMyLabel').textContent = document.getElementById('myList').getAttribute('class');
        document.getElementById('idMyLabel').setAttribute('class', 'smallBlue');
      
    } else {
        document.getElementById('myList').setAttribute('class', 'Show');
        document.getElementById('idMyLabel').textContent = document.getElementById('myList').getAttribute('class');
        document.getElementById('idMyLabel').setAttribute('class', 'bigRed');
  };
    
};