別のアコーディオンタブをクリックすると、アコーディオンタブを閉じる方法は？

Question

私はこの「オーダーメード」アコーディオンを持っており、開かれたアイテム（カラー）にクラスを追加することができます。

しかし、私はまだ述べている機能が欠けています：クリックしているタブを除くすべての開いているタブを自動クローズするので、重なりません。

はここに私の現在のコード

HTMLだ

<button class="accordion">Engagement Editor</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><!-- /.end of job post --> 

<button class="accordion">Partnership & Business Development Lead</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><!-- /.end of job post --> 

<button class="accordion">Assistant Video Editor</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><!-- /.end of job post --> 

JS

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

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

LIVE DEMO

Answer 1

Working fiddle

クリックした1アクティブをクリックすると、すべての.accordionボタンからactiveクラスを削除します。

$('.accordion').removeClass('active'); 

をまた、すべてのパネルからshowクラスを削除し、その後consirned 1に追加します：

$('.panel').removeClass('show'); 

注：それは意志関数をループから外す方がよい（例：click_action()）。

また、完全なjQueryソリューションFiddle HEREを見ることもできます。

これが役に立ちます。

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

 
function click_action(){ 
 
    $('.accordion').removeClass('active'); 
 
    $('.panel').removeClass('show'); 
 

 
    this.classList.toggle("active"); 
 
    this.nextElementSibling.classList.toggle("show"); 
 
} 
 

 
for (i = 0; i < acc.length; i++) { 
 
    acc[i].onclick = click_action; 
 
}

button.accordion { 
 
    background-color: #fff; 
 
    cursor: pointer; 
 
    padding: 0px 0 8px 0; 
 
    width: 100%; 
 
    border: none; 
 
    text-align: left; 
 
    outline: none; 
 
    font-size: 18px; 
 
    transition: 0.4s; 
 
    border-bottom: 1px solid #ccc; 
 
} 
 

 
button.accordion.active, button.accordion:hover { 
 
    color: #f06100 
 
} 
 

 
button.accordion:before { 
 
    content: '\02795'; 
 
    font-size: 9px; 
 
    float: left; 
 
    margin-left: 0px; 
 
    margin-right: 10px; 
 
    margin-top: 7px; 
 
} 
 

 
button.accordion.active:before { 
 
    content: "\2796"; 
 
} 
 

 
div.panel { 
 
    background-color: white; 
 
    max-height: 0; 
 
    padding-left: 15px; 
 
    overflow: hidden; 
 
    padding-top: 0px; 
 
    border-bottom: 4px solid #ccc; 
 
    transition: 0.6s ease-in-out; 
 
    opacity: 0; 
 
    margin-bottom: 8px; 
 
} 
 

 
.panel-icon { 
 
    margin-right: 10px; 
 
} 
 

 
.panel h5 { 
 
    font-size: 15px; 
 
    line-height: 23px; 
 
    margin-top: 5px; 
 
    margin-bottom: 0px; 
 
    display: inline-block; 
 
    color: #2d2d2d 
 
} 
 

 
.panel p { 
 
    font-size: 15px; 
 
    line-height: 23px; 
 
    padding: 15px 30px 20px 0; 
 
    color: #2d2d2d 
 
} 
 

 
div.panel.show { 
 
    opacity: 1; 
 
    max-height: 500px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="accordion">Engagement Editor</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><!-- /.end of job post --> 
 

 
<button class="accordion">Partnership & Business Development Lead</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><!-- /.end of job post --> 
 

 
<button class="accordion">Assistant Video Editor</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><!-- /.end of job post -->

Answer 2

まず、don't create functions in loops。

classListとgetElementsByClassNameのようなバニラDOM APIを使用する場合は、次にjQuery & jQuery UIを使用しているのはなぜですか？

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

var handleAccordionClick = function(){ 
    for(j = 0; j < panels.length; j++){ 
     acc[j].classList.remove("active"); 
     panels[j].classList.remove("show"); 
    } 
    this.classList.add("active"); 
    this.nextElementSibling.classList.add("show"); 
} 

for (i = 0; i < acc.length; i++) { 
    acc[i].onclick = handleAccordionClick;  
} 

ベアこれは効率的ではないことに注意して：あなたはあなたのJSFiddleで作られたJavaScriptのソリューションバニラを修正したい場合

第三には、ここで働くいくつかのコードです。すべてのアコーディオンを非アクティブ状態に設定し、クリックされたアコーディオンをアクティブに設定します。より良い解決策を得るには、より効率的なバニラソリューションにもっと多くの時間を費やすか、jQueryを使うつもりならば、.siblings()