The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Drop down Page content
sh3nmue
post Apr 28 2020, 06:46 PM
Post #1





Group: Members
Posts: 6
Joined: 16-April 20
Member No.: 27,285



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>



User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 29 2020, 05:03 AM
Post #2


.
********

Group: WDG Moderators
Posts: 8,462
Joined: 10-August 06
Member No.: 7



QUOTE(sh3nmue @ Apr 29 2020, 01:46 AM) *

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;


QUOTE
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").


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 29 2020, 05:10 AM
Post #3


.
********

Group: WDG Moderators
Posts: 8,462
Joined: 10-August 06
Member No.: 7



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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
sh3nmue
post Apr 29 2020, 08:56 AM
Post #4





Group: Members
Posts: 6
Joined: 16-April 20
Member No.: 27,285



QUOTE(Christian J @ Apr 29 2020, 05:03 PM) *

QUOTE(sh3nmue @ Apr 29 2020, 01:46 AM) *

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;


QUOTE
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").



QUOTE(Christian J @ Apr 29 2020, 05:10 PM) *

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 biggrin.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 5th July 2020 - 03:24 PM