Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / NewStats: 3,153,788 members, 7,820,760 topics. Date: Tuesday, 07 May 2024 at 09:03 PM |
Nairaland Forum / Science/Technology / Programming / Please I Need Answer. Please Help (1106 Views)
Can I Verify Adsense With Someones ID Card? Answer Please / Need Candid Answer Please (2) (3) (4)
(1) (Reply)
Please I Need Answer. Please Help by BabyApple(m): 10:15pm On Jun 29, 2019 |
Please take a look at this code .. the ".active" class isn't in any other the element but it was declared in the css and JavaScript. How does it work? <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .accordion { background-color: #eee; color: #444; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.4s; } .active, .accordion:hover { background-color: #ccc; } .panel { padding: 0 18px; display: none; background-color: white; overflow: hidden; } </style> </head> <body> <h2>Accordion</h2> <button class="accordion">Section 1</button> <div class="panel"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <button class="accordion">Section 2</button> <div class="panel"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <button class="accordion">Section 3</button> <div class="panel"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <script> var acc = document.getElementsByClassName("accordion" var i; for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { this.classList.toggle("active" var panel = this.nextElementSibling; if (panel.style.display === "block" { panel.style.display = "none"; } else { panel.style.display = "block"; } }); } </script> </body> </html> |
Re: Please I Need Answer. Please Help by RealLordZeus(m): 10:40pm On Jun 29, 2019 |
BabyApple:It will toggle the accordion, once a button/heading is clicked, it will show the content of that section |
Re: Please I Need Answer. Please Help by stanliwise(m): 11:13pm On Jun 29, 2019 |
BabyApple:The class was attached to the html button by JavaScript. The "toggle" function keyword in JavaScript is what is doing the magic. To see how it is being toggled, if you use chrome. press ctrl+shift+i to open developer options, now click on the accordion button and watch how the html tag in accordion button is dynamically placed and removed by JavaScript. A toggle is anything that switch between two options. |
(1) (Reply)
I Have Free WIFI At My Disposal. Give Me Links To Download Programming Tutorials / Forsage Meta Force A Better Programmed Smart Contract That Pays Better / Nigerian Websites And Rss
(Go Up)
Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health religion celebs tv-movies music-radio literature webmasters programming techmarket Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10) Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 26 |