nicht angemeldet
Accordion anpassen
Matthias Scharwies
Gunnar BittersmannHallo zusammen,
ich brauche bitte Eure Hilfe. Ich möchte ein Accordion entwerfen, das den ersten Reiter grundsätzlich beim Laden offen hat. Sobald man einen neuen Reiter anklickt, soll dieser geöffnet werden und der bisher geöffnete geschlossen werden. Bei meinem Code sind alle Reiter geschlossen und es können beliebig viele Reiter geöffnet werden. Wie kann ich das ändern?
Das bekomme ich leider nicht alleine hin. Kann mir jemand weiterhelfen?
<!DOCTYPE html>
<html>
<head>
<style>
button.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 14px;
width: 100%;
border: none;
text-align: center;
outline: none;
font-size: 24px;
font-family: DINCond-Regular;
transition: 0.4s;
}
button.accordion.active, button.accordion:hover {
background-color: #ddd;
}
button.accordion:after {
content: '\002B';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}
button.accordion.active:after {
content: "\2212";
}
div.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
font-family: DIN Pro;
text-align: center;
transition: max-height 0.2s ease-out;
}
</style>
</head>
<body>
<button class="accordion">Section 1</button>
<div class="panel">
<p style="font-family: DIN Pro">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 style="font-family: DIN Pro">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 style="font-family: DIN Pro">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].onclick = 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>
-
Servus!
ich brauche bitte Eure Hilfe. Ich möchte ein Accordion entwerfen, das den ersten Reiter grundsätzlich beim Laden offen hat.
Im Wiki gibt es einen Ansatz mit dem Checkbox-Hack, der nur mit CSS funktioniert:
JavaScript
Heydon Pickering verwendet in diesem Beispiel anstelle von Klassen zugängliche ARIA-Zustände.
Die Buttons werden von Dir mit Klassen verändert, das würde ich auch mit den Panels machen. Hier die Version mit den aria-Zuständen:
[aria-hidden="true"] { height: 0; } [aria-hidden="false"] { height: 100%; }Sobald man einen neuen Reiter anklickt, soll dieser geöffnet werden und der bisher geöffnete geschlossen werden. Bei meinem Code sind alle Reiter geschlossen und es können beliebig viele Reiter geöffnet werden. Wie kann ich das ändern?
Pickerings Beispiel funktioniert wie Deins. Wenn Du alle anderen schließen willst, durchlaufe mit jedem Klick eine Schleife, die alle Panels auf
aria-hidden="false"setzt und dann das geklickte aufaria-hidden="true".target.nextElementSibling.setAttribute("aria-hidden","true");Herzliche Grüße
Matthias Scharwies
--
Es gibt viel zu tun: ToDo-Liste -
Servus!
Ich möchte ein Accordion entwerfen, ...
Eigentlich sollte man so etwas mit dem details-Element realisieren, dass vom IE / Edge leider noch nicht unterstützt wird.
Es gibt aber Polyfills.
Herzliche Grüße
Matthias Scharwies
--
Es gibt viel zu tun: ToDo-Liste-
Servus!
hier gibt's jetzt mal eine Variante mit ARIA-Attributen:
Würdet ihr die Idee mit dem Polyfill für das details-Element weiterverfolgen oder lieber lassen (Angesichts der Tatsache, dass es sich hier nur um wenige Zeilen JavaScript handelt.) ?
Herzliche Grüße
Matthias Scharwies
--
Es gibt viel zu tun: ToDo-Liste
-
-
@@Check
Ich möchte ein Accordion entwerfen, das den ersten Reiter grundsätzlich beim Laden offen hat. Sobald man einen neuen Reiter anklickt, soll dieser geöffnet werden und der bisher geöffnete geschlossen werden.
Das kann äußerst problematisch werden. Ich hab das mal mit Radio-Button-Hack gebaut. Die Präambel ist offen. Scrolle runter zum Artikel 1, click drauf. Dumm gelaufen. Du siehst irgendwas, aber nicht Artikel 1. Kaum benutzbar, miserable UX.
Das Problem besteht nicht so, wenn sich bisher geöffnete Abschnitte beim Öffnen eines weiteren nicht schließen: mit Checkbox-Hack gebaut.
Wenn sich denn bisher geöffnete schließen sollen (warum eigentlich?), muss man unbedingt dafür sorgen, dass der jetzt geöffnete im Vieport zu sehen ist. Bspw. mit JavaScript an die entsprechende Stelle scrollen. Oder mit Target-Hack gebaut.
LLAP 🖖
--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory