別のアコーディオンタブを開く前にすべてのアコーディオンタブを切り替えます（一度に1つだけ開く）

Question

JQueryとJQuery UIを使用して、アコーディオンをベースにした小さなWebアプリケーションを構築しています。私はアコーデオンの論理を理解しましたが、私が望む結果を得るためにいくつかの問題を抱えています。クリックしたときにすべてのタブが崩壊するようにしたいが、どうやってそれを行うのかは分からない。

Googleは私を手伝ってくれなかった。ここでも何も見つかりませんでした。ここで

は私のHTMLです：

<button class="accordion">About</button> 
     <div class="panel"> 
      <p>Blah 1</p> 
     </div> 
     <button class="accordion">Contact</button> 
     <div class="panel"> 
      <form> 
       <label>Full Name</label> 
       <input type="text" /> 
       <label>E-mail Address</label> 
       <input type="email" /> 
      </form> 
     </div> 

マイCSS：

button.accordion { 
    background-color: #336699; 
    background: linear-gradient(-90deg, #fff, #336699, #fff); 
    color: #fff; 
    cursor: pointer; 
    padding: 18px; 
    width: 100%; 
    border: none; 
    text-align: center; 
    outline: none; 
    font-size: 15px; 
    transition: 0.4s; 
} 

button.accordion:not(:last-child) { 
    margin-bottom: 10px; 
} 

button.accordion .active, 
button.accordion:hover { 
    background-color: #555; 
} 

div.panel { 
    padding: 0 18px; 
    background-color: white; 
    max-height: 0; 
    overflow: hidden; 
    transition: 0.6 ease-in-out; 
    opacity: 0; 
} 

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

div.column { 
    float: left; 
    width: 300px; 
} 

そして最後に、私はJQuery：

$(function() { 
    $('.accordion').on('click', function() { 
     // Something here, maybe? 
     $(this).toggleClass('active', 400); 
     $(this).next().toggleClass('show', 400); 
    }); 
}); 

私は閉じるために、コールバックの内側に何かを入れてみてくださいそれらのすべてはすぐに実行され、タブはまったく開きません。誰かが私に正確に何が起こっているの説明を与えてもらえますか？

Answer 1

あなたは誤解し@NagaSaiA

$(function() { 
    $('.accordion').on('click', function() { 

    var x = $('.accordion').hasClass('active'); 
    if (x) { 
     $('.active').removeClass('active'); 
     $('div').removeClass('show'); 
     $(this).toggleClass('active', 400); 
     $(this).next().toggleClass('show', 400); 
    } else { 
     console.log("x"); 
     $(this).toggleClass('active', 400); 
     $(this).next().toggleClass('show', 400); 
    } 
    }); 
}); 

http://codepen.io/nagasai/pen/grvNGZ

Answer 2

$(function() { 
 
    $('.accordion').on('click', function() { 
 
     var panel = $(this).next()[0]; 
 
     $('.accordion').not($(this)).removeClass('active'); 
 
     $('.panel').not(panel).removeClass('show'); 
 
     $(this).toggleClass('active'); 
 
     $(panel).toggleClass("show"); 
 
    }); 
 
});

button.accordion { 
 
    background-color: #336699; 
 
    background: linear-gradient(-90deg, #fff, #336699, #fff); 
 
    color: #fff; 
 
    cursor: pointer; 
 
    padding: 18px; 
 
    width: 100%; 
 
    border: none; 
 
    text-align: center; 
 
    outline: none; 
 
    font-size: 15px; 
 
    transition: 0.4s; 
 
} 
 

 
button.accordion:not(:last-child) { 
 
    margin-bottom: 10px; 
 
} 
 

 
button.accordion.active, 
 
button.accordion:hover { 
 
    background: #555; 
 
} 
 

 
div.panel { 
 
    padding: 0 18px; 
 
    background-color: white; 
 
    max-height: 0; 
 
    overflow: hidden; 
 
    transition: 0.6 ease-in-out; 
 
    opacity: 0; 
 
} 
 

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

 
div.column { 
 
    float: left; 
 
    width: 300px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="accordion">About</button> 
 
<div class="panel"> 
 
    <p>Blah 1</p> 
 
</div> 
 
<button class="accordion">Contact</button> 
 
<div class="panel"> 
 
    <form> 
 
    <label>Full Name</label> 
 
    <input type="text" /> 
 
    <label>E-mail Address</label> 
 
    <input type="email" /> 
 
    </form> 
 
</div>

あなたはこれを試すことができます。