Schließen Sie andere Akkordeons beim Klicken (ohne Umschalten der Klasse)

Question

Ich verwende derzeit einen Code, der dem Beispiel dieser w3schools link sehr ähnlich ist, aber ich kann nicht herausfinden, was ich dem Javascript hinzufügen muss, um andere Tabs zu schließen wenn Sie auf eine der Registerkarten klicken.

Ich habe ein paar SO Antworten in Bezug auf andere Akkordeons auf Klick (wie here) gegangen - aber sie beschäftigen sich hauptsächlich mit dem Entfernen von Klassen (".active") von Geschwistern, die (möglicherweise?) Oder möglicherweise nicht funktionieren dieser Fall.

Ich bin nicht sehr vertraut mit dem Code, aber ich habe den Eindruck, dass es die JS ist, die animiert das Panel nach unten rutschen, und keine CSS-Animation.

Derzeit sieht mein Code wie folgt aus: https://jsfiddle.net/joshuacsk/yw7eygxk/ und die in Frage JS wie so:

JS

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"; 
    } 
    } 
} 

Gibt es eine Möglichkeit andere Tabs zu schließen über den Stil der Code, oder gibt es einen anderen besseren Weg, dies zu tun?

Answer 1

können Sie hinzufügen:

for(j = 0; j < acc.length; j++) { 
    acc[j].nextElementSibling.style.maxHeight = null; 
} 

alle Registerkarten zu schließen. Sehen Sie sich das Snippet am Ende meiner Antwort an.

PS: Die Animation der Panels, die sich nach oben/unten bewegen, ist CSS, das JavaScript löst es nur durch Ändern der Höhe aus.

var acc = document.getElementsByClassName("accordion"); 
 
var i; 
 
for (i = 0; i < acc.length; i++) { 
 
    acc[i].onclick = function() { 
 
    for(j = 0; j < acc.length; j++) { 
 
     acc[j].nextElementSibling.style.maxHeight = null; 
 
    } 
 
    this.classList.toggle("active"); 
 
    var panel = this.nextElementSibling; 
 
    if (panel.style.maxHeight){ 
 
     panel.style.maxHeight = null; 
 
    } else { 
 
     panel.style.maxHeight = panel.scrollHeight + "px"; 
 
    } 
 
    } 
 
}

.accordiontext{ 
 
    font-family:futura-pt; 
 
    font-weight:300; 
 
    font-size:11; 
 
} 
 
button{ 
 
    font-family:futura-pt; 
 
    font-weight: bold; 
 
    font-size: 20px; 
 
    letter-spacing: 0.2em; 
 
    box-sizing:border-box; 
 
    box-shadow: inset 0 0 0 3px #202020; 
 
    position:relative; 
 
    vertical-align:middle; 
 
    border: 0; 
 
} 
 
button.accordion { 
 
    background-color: #fff; 
 
    color: #202020; 
 
    cursor: pointer; 
 
    padding-top: 8px; 
 
    padding-bottom: 8px; 
 
    width: 100%; 
 
    text-align: left; 
 
    background: linear-gradient(to right, #202020 50%, #ffffff 50%); 
 
    background-size: 205% 100%; 
 
    background-position:right bottom; 
 
    transition:all 1s ease; 
 
} 
 

 
button.accordion.active, button.accordion:hover { 
 
    background-position:left bottom; 
 
    color: #ffffff; 
 
    
 
} 
 

 
/* Style the accordion panel. Note: hidden by default */ 
 
div.panel { 
 
    padding: 8px 18px; 
 
    background-color: white; 
 
    max-height: 0; 
 
    overflow: hidden; 
 
    transition: max-height 0.6s ease; 
 
} 
 

 
button.accordion:after { 
 
    content: '\e009'; /* Unicode character before click */ 
 
    color: #202020; 
 
    font-family: 'squarespace-ui-font'; 
 
    font-style: normal; 
 
    font-weight: normal; 
 
    float: right; 
 
    margin-right: 12px; 
 
    transition: all 0.3s ease-in 
 
    
 
} 
 

 
button.accordion.active:after { 
 
    content: "\e006"; /* Unicode character after click */ 
 
    color: #ffffff; 
 
}

<div class="accordionholder"> 
 
<button class="accordion">Titleasdasdasd</button> <!--title--> 
 
<div class="panel"> 
 
    <p class="accordiontext">Lorem ipsum</p> <!--content--> 
 
</div> 
 

 
<button class="accordion">Titleasdasdasd</button> <!--title--> 
 
<div class="panel"> 
 
    <p class="accordiontext">Lorem ipsum</p> <!--content--> 
 
</div> 
 

 
<button class="accordion">Titleasdasdasd</button> <!--title--> 
 
<div class="panel"> 
 
    <p class="accordiontext">Lorem ipsum</p> <!--content--> 
 
</div> 
 

 
<button class="accordion">Titleasdasdasd</button> <!--title--> 
 
<div class="panel"> 
 
    <p class="accordiontext">Lorem ipsum</p> <!--content--> 
 
</div> 
 
</div>

Answer 2

var acc = document.getElementsByClassName("accordion"); 
 
var i; 
 
for (i = 0; i < acc.length; i++) { 
 
    acc[i].onclick = function() { 
 
    for(var j = 0; j < acc.length; j++) { 
 
     acc[j].nextElementSibling.style.maxHeight = null; 
 
     acc[j].classList.remove('active'); 
 
    } 
 
    this.classList.toggle("active"); 
 
    var panel = this.nextElementSibling; 
 
    if (panel.style.maxHeight){ 
 
     panel.style.maxHeight = null; 
 
    } else { 
 
     panel.style.maxHeight = panel.scrollHeight + "px"; 
 
    } 
 
    } 
 
}

.accordiontext{ 
 
    font-family:futura-pt; 
 
    font-weight:300; 
 
    font-size:11; 
 
} 
 
button{ 
 
    font-family:futura-pt; 
 
    font-weight: bold; 
 
    font-size: 20px; 
 
    letter-spacing: 0.2em; 
 
    box-sizing:border-box; 
 
    box-shadow: inset 0 0 0 3px #202020; 
 
    position:relative; 
 
    vertical-align:middle; 
 
    border: 0; 
 
} 
 
button.accordion { 
 
    background-color: #fff; 
 
    color: #202020; 
 
    cursor: pointer; 
 
    padding-top: 8px; 
 
    padding-bottom: 8px; 
 
    width: 100%; 
 
    text-align: left; 
 
    background: linear-gradient(to right, #202020 50%, #ffffff 50%); 
 
    background-size: 205% 100%; 
 
    background-position:right bottom; 
 
    transition:all 1s ease; 
 
} 
 

 
button.accordion.active, button.accordion:hover { 
 
    background-position:left bottom; 
 
    color: #ffffff; 
 
    
 
} 
 

 
/* Style the accordion panel. Note: hidden by default */ 
 
div.panel { 
 
    padding: 8px 18px; 
 
    background-color: white; 
 
    max-height: 0; 
 
    overflow: hidden; 
 
    transition: max-height 0.6s ease; 
 
} 
 

 
button.accordion:after { 
 
    content: '\e009'; /* Unicode character before click */ 
 
    color: #202020; 
 
    font-family: 'squarespace-ui-font'; 
 
    font-style: normal; 
 
    font-weight: normal; 
 
    float: right; 
 
    margin-right: 12px; 
 
    transition: all 0.3s ease-in 
 
    
 
} 
 

 
button.accordion.active:after { 
 
    content: "\e006"; /* Unicode character after click */ 
 
    color: #ffffff; 
 
}

<div class="accordionholder"> 
 
<button class="accordion">Titleasdasdasd</button> <!--title--> 
 
<div class="panel"> 
 
    <p class="accordiontext">Lorem ipsum</p> <!--content--> 
 
</div> 
 

 
<button class="accordion">Titleasdasdasd</button> <!--title--> 
 
<div class="panel"> 
 
    <p class="accordiontext">Lorem ipsum</p> <!--content--> 
 
</div> 
 

 
<button class="accordion">Titleasdasdasd</button> <!--title--> 
 
<div class="panel"> 
 
    <p class="accordiontext">Lorem ipsum</p> <!--content--> 
 
</div> 
 

 
<button class="accordion">Titleasdasdasd</button> <!--title--> 
 
<div class="panel"> 
 
    <p class="accordiontext">Lorem ipsum</p> <!--content--> 
 
</div> 
 
</div>