Generally, the&nbsp;jQuery toggle()&nbsp;method is used to show and hide the HTML element on the web page. But if you don&rsquo;t want to use the jQuery library, the toggle effect can be easily added using JavaScript. Using JavaScript you can check the visibility of an element and show/hide the HTML element based on their visibility. The following code snippet checks the visibility and toggle between show &amp; hide the HTML element with JavaScript.
<ul class="bullet_disk_list">
<li>Use JavaScript&nbsp;style display&nbsp;property to check whether an element is hidden.</li>
<li>If the element is invisible, display it, otherwise hide it.</li>
</ul>
<pre>var element = document.getElementById('elementID');
if(element.style.display === "none"){
 element.style.display = "block";
} else {
 element.style.display = "none";
}</pre>
The following code snippet shows how you can hide and show the HTML element using JavaScript. JavaScript The toggle() function toggle display of the HTML element using JavaScript.
<ul class="bullet_disk_list">
<li>Pass the element ID which you want to show/hide based on the visibility.</li>
</ul>
<pre>&lt;script&gt;
 function toggle(ID){
 var element = document.getElementById(ID);
 if(element.style.display === "none"){
 element.style.display = "block";
 }else{
 element.style.display = "none";
 }
 }
&lt;/script&gt;</pre>
HTML Call the&nbsp;<code>toggle('elementID')</code>&nbsp;on click event to show/hide the DIV element.
<pre>&lt;button onclick="toggle('divID')"&gt;Toggle Hide/Show&lt;/button&gt;

&lt;div id="divID"&gt;
 This is a DIV element.
&lt;/div&gt;</pre>

Generally, the jQuery toggle() method is used to show and hide the HTML element on the web page. But if you don’t want to use the jQuer...

How to Toggle (Show/Hide) Element using JavaScript