Show Hide DIV

Version 14.1 by Vincent Massol on 2021/03/18 11:27

cogLets you show/hide a DIV element on a page using Javascript
TypeSnippet
Category
Developed by

Guillaume Lerouge

Rating
0 Votes
LicenseGNU 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>

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 !

Show/Hide the box above !

     

Get Connected