Check: Accordion anpassen

Beitrag lesen

SELF-Forum

Accordion anpassen

Check Homepage des Autors
– Informationen zu den Bewertungsregeln

Hallo 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>
Beitrag melden
–
Informationen zu den Bewertungsregeln