How to Toggle between Hiding and Showing for HTML Elements

The basic mechnism for hiding and showing HTML elements are the CSS properties: display and visibility. When we want to hide we set the element style's display to none or visibility to hidden.

What if we want to contorl when a HTML element is showing and hiding?

We must write some JavaScript code like this:

<button onclick = "hide()">Hide</button>
<button onclick = "show()">Show</button>
<div style = "background-color:lightgrey" id = "sometexttotoggle">some text</div>
<script>
  function hide(){
  	document.getElementById('sometexttotoggle').style.display = "none";
  }
  
    function show(){
  	document.getElementById('sometexttotoggle').style.display = "block";
  }
</script>

some text

Or this one with visibility

<button onclick = "hide()">Hide</button>
<button onclick = "show()">Show</button>
<div style = "background-color:lightgrey" id = "sometexttotoggle">some text</div>
<script>
  function hide(){
  	document.getElementById('sometexttotoggle').style.visibility = "hidden";
  }
  
    function show(){
  	document.getElementById('sometexttotoggle').style.visibility = "visible";
  }
</script>

some text

The only difference between hiding element with display and visibility is that with visibility="hidden", the hidden element still takes up the same space while with display = "none" does not.

Code Improved Stage 1

Let's write shorter code

<button onclick = "show_1('none')">Hide</button>
<button onclick = "show_1('block')">Show</button>
<div style = "background-color:lightgrey" id = "sometexttotoggle_1">some text</div>
<script>
    function show_1(t){
  	document.getElementById('sometexttotoggle_1').style.display = t;
  }
</script>

some text

Now we just need 1 JavaScript function.

Code Improved Stage 2

What about no script tage involved when we soly rely on "in-tag" JavasScript which can help create reusabel hiding and showing components.

<button onclick = "document.getElementById('sometexttotoggle_2').style.display = 'none'">Hide</button>
<button onclick = "document.getElementById('sometexttotoggle_2').style.display = 'block'">Show</button>
<div style = "background-color:lightgrey" id = "sometexttotoggle_2">some text</div>

some text

Even shorter without the good old document.getElementById

<button onclick = "sometexttotoggle_3.style.display = 'none'">Hide</button>
<button onclick = "sometexttotoggle_3.style.display = 'block'">Show</button>
<div style = "background-color:lightgrey" id = "sometexttotoggle_3">some text</div>

some text

Now, what if we want just one button.

<button onclick="sometexttotoggle_4.style.display = sometexttotoggle_4.style.display =='none'? 'block':'none'">Ξ</button>
<div id="sometexttotoggle_4" style="background-color: lightgrey;">some text</div>

some text

Finally, we can also toggle the button text, innerHTML.

<button onclick="sometexttotoggle_5.style.display = sometexttotoggle_5.style.display =='none'? 'block':'none';
                 this.innerHTML = this.innerHTML == '&#926;'?'X':'&#926;';
                 ">
                 X
                 </button>
<div id="sometexttotoggle_5" style="background-color: lightgrey;">some text</div>

some text

This technique can be used to create fully reusable accordion components as explained in this post.