JavaScript több panel elrejtése és megjelenítése

JavaScript több panel elrejtése és megjelenítése
2018-01-19T01:25:11+01:00
2018-01-19T08:09:48+01:00
2022-10-15T21:30:50+02:00
dctacsi
Sziasztok,

Van egy kód ami annyit csinál, hogy legördít 1-1 panelt majd ha ismét ugyan arra a gombra kattintunk, akkor elrejti azt.
Ez tök szuperul is működik, viszont nekem arra lenne szükségem, hogy ha pl a "Section 1" panelja le van görgetve, és én rá kattintok a "Section 2"-re akkor a kettő panelje legördüljön, az 1-é pedig elrejtődjön.
És persze ugyan ez össze vissza az összessel.

Valaki tudna nekem segíteni, hogy hogyan tudnám ezt megoldani?

Mindenkinek előre is köszönöm a segítséget!!!

A forráskód a következő:

<!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; } .accordion:after { content: '\002B'; color: #777; font-weight: bold; float: right; margin-left: 5px; } .active:after { content: "\2212"; } .panel { padding: 0 18px; background-color: white; max-height: 0; overflow: hidden; transition: max-height 0.4s ease-out; } </style> </head> <body> <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.maxHeight){ panel.style.maxHeight = null; } else { panel.style.maxHeight = panel.scrollHeight + "px"; } }); } </script> </body> </html>
Mutasd a teljes hozzászólást!
Ha az előző javaslat nem elég, keress rá a következőre => javascript accordion codepen
Megj: Ha második találat sem felel meg, nézd tovább...
Kieg: A kódod gondolom itt találtad...
Mutasd a teljes hozzászólást!

Tetszett amit olvastál? Szeretnél a jövőben is értesülni a hasonló érdekességekről?
abcd