Drop down Page content |
Drop down Page content |
sh3nmue |
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> |
Christian J |
Apr 29 2020, 05:03 AM
Post
#2
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
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"). |
Christian J |
Apr 29 2020, 05:10 AM
Post
#3
|
. Group: WDG Moderators Posts: 9,656 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> |
sh3nmue |
Apr 29 2020, 08:56 AM
Post
#4
|
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 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"). 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 |
Lo-Fi Version | Time is now: 25th April 2024 - 06:54 AM |