Drop down Page content Options

[sh3nmue]

Hi,,, I try to make some Dropdown or hide and show content in my page,,,
I try this code and it's work but how to hide the content again if I click the button?
Please help me

this the code

CODE

<script>
function reveal(){
  document.getElementById('h').className = 'open';
}
</script>

<style>
div {height: 50px; background: green; color: white;}
#h {height: 0; transition: height 0s linear; background: blue}
#h.open {height: 150px}
</style>

<div>I'm a regular part of the page<br><button onclick="reveal()">Open the "hidden" part</button></div>
<div id="h">I'm the hidden part of the page</div>

[Christian J]

Hi,,, I try to make some Dropdown or hide and show content in my page,,,
I try this code and it's work

Actually, when you set the height to 0 the content will spill out below (you may not see it if both your text and background colors are white, but change one of those colors and it will be apparent). To avoid it, add this to the #h rule:

CODE

overflow: hidden;

but how to hide the content again if I click the button?

Check if the className "open" exists, and set or remove it accordingly:

CODE

function reveal()
{
    var h=document.getElementById('h');
    if(h.className=='open')
    {
        h.className='';
    }
    else
    {
        h.className = 'open';
    }
}

It's also possible to change the button text on each click, or you could simply choose a text that works for both states (like "Toggle hidden part").

[Christian J]

However, the CSS will make the hidden content unreadable if the user has disabled javascript. To avoid that, you can hide the content with javascript as well:

Javascript

CODE

function reveal()
{
    var h=document.getElementById('h');
    if(h.className=='open')
    {
        h.className='closed';
    }
    else
    {
        h.className = 'open';
    }
}
window.addEventListener('DOMContentLoaded', reveal, false);

CSS

CODE

div {height: 50px; background: green; color: white;}
#h.closed {
height: 0;
overflow: hidden;
transition: height 0s linear; /* Is this line actually doing anything? */
background: blue;
}
#h.open {height: 150px}

HTML

CODE

<div>I'm a regular part of the page<br><button onclick="reveal()">Toggle the "hidden" part</button></div>
<div id="h" class="open">I'm the hidden part of the page</div>

[sh3nmue]

Hi,,, I try to make some Dropdown or hide and show content in my page,,,
I try this code and it's work

Actually, when you set the height to 0 the content will spill out below (you may not see it if both your text and background colors are white, but change one of those colors and it will be apparent). To avoid it, add this to the #h rule:

CODE

overflow: hidden;

but how to hide the content again if I click the button?

Check if the className "open" exists, and set or remove it accordingly:

CODE

function reveal()
{
    var h=document.getElementById('h');
    if(h.className=='open')
    {
        h.className='';
    }
    else
    {
        h.className = 'open';
    }
}

It's also possible to change the button text on each click, or you could simply choose a text that works for both states (like "Toggle hidden part").

However, the CSS will make the hidden content unreadable if the user has disabled javascript. To avoid that, you can hide the content with javascript as well:

Javascript

CODE

function reveal()
{
    var h=document.getElementById('h');
    if(h.className=='open')
    {
        h.className='closed';
    }
    else
    {
        h.className = 'open';
    }
}
window.addEventListener('DOMContentLoaded', reveal, false);

CSS

CODE

div {height: 50px; background: green; color: white;}
#h.closed {
height: 0;
overflow: hidden;
transition: height 0s linear; /* Is this line actually doing anything? */
background: blue;
}
#h.open {height: 150px}

HTML

CODE

<div>I'm a regular part of the page<br><button onclick="reveal()">Toggle the "hidden" part</button></div>
<div id="h" class="open">I'm the hidden part of the page</div>

Wow thx u guys,,, I already try the code and all works... thanks alot