CSS: Toggle Akkordeon Panel?

Question

Ich versuche ein Akkordeon-Panel mit CSS und ein bisschen Javascript zu erstellen.

Alles scheint gut zu funktionieren, abgesehen von dem Umschalten der Panels.

Also im Grunde, wenn ein Panel angeklickt wird, müssen alle anderen offenen Panels geschlossen werden. Hier

ist eine Geige:

FIDDLE

Ich habe versucht, es so zu tun, aber das hält alle Platten die ganze Zeit geschlossen:

var acc = document.getElementsByClassName("accordion"); 
var i; 

for (i = 0; i < acc.length; i++) { 
    acc[i].onclick = function(){ 
     this.classList.toggle("active"); 
     $('.panel').addClass('hide'); 
     this.nextElementSibling.classList.toggle("hide"); 
     this.nextElementSibling.classList.toggle("show"); 
    } 
} 

und die CSS-Teil:

.panel.hide { 
    opacity: 0; 
    height: 0; 
} 

Ich habe auch versucht:

$(this).removeClass('hide'); 

Ich weiß, das ist jquery und nicht pure Javascript, aber ich dachte, ich könnte arbeiten, aber nicht.

Könnte jemand bitte zu diesem Thema beraten?

Vielen Dank im Voraus.

Answer 1

in dem Handler klicken um das aktive Element erhalten, ist es nicht das aktuelle Element ist dann Entferne den aktiven Status von ihm.

var acc = document.getElementsByClassName("accordion"); 
 
var i; 
 

 
for (i = 0; i < acc.length; i++) { 
 
    acc[i].onclick = function() { 
 
    var active = document.querySelector(".accordion.active"); 
 
    if (active && active != this) { 
 
     active.classList.remove("active"); 
 
     active.nextElementSibling.classList.remove("show"); 
 
    } 
 
    this.classList.toggle("active"); 
 
    this.nextElementSibling.classList.toggle("show"); 
 
    } 
 
}

button.accordion { 
 
    background-color: #CBF1F5; 
 
    color: #444; 
 
    cursor: pointer; 
 
    padding: 18px; 
 
    width: 100%; 
 
    border: solid 1px #3CF; 
 
    text-align: left; 
 
    outline: none; 
 
    font-size: 18px; 
 
    transition: 0.4s; 
 
    font-weight: 600; 
 
} 
 
button.accordion.active, 
 
button.accordion:hover { 
 
    background-color: #E1F7FB; 
 
} 
 
button.accordion:after { 
 
    content: '\25bc'; 
 
    font-size: 13px; 
 
    color: #777; 
 
    float: right; 
 
    margin-left: 5px; 
 
} 
 
button.accordion.active:after { 
 
    content: "\25b2"; 
 
    color: #FFF; 
 
} 
 
.panel { 
 
    padding: 0 18px; 
 
    background-color: white; 
 
    max-height: 0; 
 
    overflow: hidden; 
 
    transition: 0.6s ease-in-out; 
 
    opacity: 0; 
 
} 
 
.panel.show { 
 
    opacity: 1; 
 
    max-height: 500px; 
 
} 
 
.panel.hide { 
 
    opacity: 0; 
 
    height: 0; 
 
}

<button class="accordion">Section 1</button> 
 
<div id="foo" 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 id="foo" 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 id="foo" 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>

---

Mit

jQuery

$('.accordion').click(function() { 
 
    var $this = $(this).toggleClass('active'); 
 
    var $panel = $this.next().toggleClass('show'); 
 
    $('.accordion.active').not(this).removeClass('active').next().removeClass('show'); 
 
});

button.accordion { 
 
    background-color: #CBF1F5; 
 
    color: #444; 
 
    cursor: pointer; 
 
    padding: 18px; 
 
    width: 100%; 
 
    border: solid 1px #3CF; 
 
    text-align: left; 
 
    outline: none; 
 
    font-size: 18px; 
 
    transition: 0.4s; 
 
    font-weight: 600; 
 
} 
 
button.accordion.active, 
 
button.accordion:hover { 
 
    background-color: #E1F7FB; 
 
} 
 
button.accordion:after { 
 
    content: '\25bc'; 
 
    font-size: 13px; 
 
    color: #777; 
 
    float: right; 
 
    margin-left: 5px; 
 
} 
 
button.accordion.active:after { 
 
    content: "\25b2"; 
 
    color: #FFF; 
 
} 
 
.panel { 
 
    padding: 0 18px; 
 
    background-color: white; 
 
    max-height: 0; 
 
    overflow: hidden; 
 
    transition: 0.6s ease-in-out; 
 
    opacity: 0; 
 
} 
 
.panel.show { 
 
    opacity: 1; 
 
    max-height: 500px; 
 
} 
 
.panel.hide { 
 
    opacity: 0; 
 
    height: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="accordion">Section 1</button> 
 
<div id="foo" 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 id="foo" 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 id="foo" 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>

Answer 2

den .not Selektor verwenden ... Sie brauchen nicht zu einem für mit jquery

JS:

var acc = $(".accordion"); //jquery accordion 

acc.click(function() //when we click on element 
{ 
    $(this).toggleClass("active"); //it is active 
    $('.panel').not($(this).next()).hide(); //we hide all panels but not the next element 
    $(this).next().toggle(); //and we show the next element 
});