

- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create an Accordion with CSS and JavaScript?
To create an Accordion with CSS and JavaScript, the code is as follows −
Example
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .demo { background-color: #eee; cursor: pointer; padding: 25px; width: 100%; } .active, .demo:hover { background-color: #ccc; border: 2px; font-size: 14px; } .panel { padding: 0 18px; display: none; background-color: #F0F8FF; overflow: hidden; } </style> </head> <body> <h2>Examination</h2> <p>Following is the information on exams:</p> <button class="demo">Admit Card</button> <div class="panel"> <p>Admit Card will release on 25th March.</p> </div> <button class="demo">Exam Date</button> <div class="panel"> <p>Exam will held on 30th March.</p> </div> <script> var val = document.getElementsByClassName("demo"); var i; for (j = 0; j < val.length; j++) { val[j].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>
Output
This will produce the following output −
On clicking any of the Button, the hidden info will be visible as shown below −
- Related Questions & Answers
- How to create an expanding grid with CSS and JavaScript?
- How to create accordion in JavaFX?
- How to create an image to zoom with CSS and JavaScript?
- How to create an off-canvas menu with CSS and JavaScript?
- How to create tabs with CSS and JavaScript?
- How to create popups with CSS and JavaScript?
- How to create tab headers with CSS and JavaScript?
- How to create full-page tabs with CSS and JavaScript?
- How to create a quotes slideshow with CSS and JavaScript?
- How to create a responsive slideshow with CSS and JavaScript?
- How to create responsive Modal Images with CSS and JavaScript?
- How to create custom select boxes with CSS and JavaScript?
- How to create a Modal Box with CSS and JavaScript?
- How to create a scroll indicator with CSS and JavaScript?
- How to create custom range sliders with CSS and JavaScript?
Advertisements