Show Hide DIV
Last modified by Vincent Massol on 2021/03/18 11:28
 | Lets you show/hide a DIV element on a page using Javascript |
| Type | Snippet |
| Category | |
| Developed by | |
| Rating | |
| License | GNU Lesser General Public License 2.1 |
Table of contents
Description
You can decide to keep the DIV hidden when the page loads and show it when a button is clicked or alternatively show the DIV when the page loads and hide it when clicked. It uses the toggleClass function originally used to show/hide attachments.
If you want to hide the DIV when page loads just set its class as 'hidden', otherwise leave it blank.
Code
<div id="DIV ID" class="">
This Box will be hidden if you click on the box below!
</div>
<div onclick="toggleClass($('DIV ID'), 'hidden')">
Show/Hide the box!
</div>
Or alternatively the following one to keep the box hidden when page loads:
<div id="DIV ID" class="hidden">
This Box will be hidden if you click on the box below !
</div>
<div onclick="toggleClass($('DIV ID'), 'hidden')">
Show/Hide the box!
</div>
This Box will be hidden if you click on the box below!
</div>
<div onclick="toggleClass($('DIV ID'), 'hidden')">
Show/Hide the box!
</div>
Or alternatively the following one to keep the box hidden when page loads:
<div id="DIV ID" class="hidden">
This Box will be hidden if you click on the box below !
</div>
<div onclick="toggleClass($('DIV ID'), 'hidden')">
Show/Hide the box!
</div>
Result
| Box Shown when page loads | Box Hidden when page loads |
|
This Box will be hidden if you click on the box below !
Show/Hide the box above !
|
This Box will be hidden if you click on the box below !
Show/Hide the box above !
|
