CSS और JavaScript से एकॉर्डियन बनाने के लिए, कोड निम्नलिखित है:
उदाहरण
<!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>आउटपुट
यह निम्नलिखित आउटपुट देगा:
किसी भी बटन पर क्लिक करने पर, छिपी हुई जानकारी नीचे दिखाए अनुसार विज़िबल होगी:
