アコーディオンは次の要素にクラスを適用していません

Question

私のウェブサイトにはアコーディオンがありますが、ボタンの1つをクリックすると、同じクラスのすべての要素に次の要素だけでなくトグルが与えられます

私は私がここにいくつかの要素を混同していると思いますが、すべての要素を示しているようだ、次のCSS

button.flxaccordion { 
    background-color: rgb(255, 231, 217); 
    color: #444; 
    cursor: pointer; 
    padding: 18px; 
    width: 100%; 
    border: solid 0px; 
    text-align: left; 
    outline: none; 
    font-size: 18px; 
    transition: 0.4s; 
    font-weight: 600; 
} 
button.flxaccordion.active, 
button.flxaccordion:hover { 
    background-color: rgb(233, 93, 15); 
} 
button.flxaccordion:after { 
    content: '\25bc'; 
    font-size: 13px; 
    color: rgb(233, 93, 15); 
    float: right; 
    margin-left: 5px; 
} 
button.flxaccordion.active:after { 
    content: "\25b2"; 
    color: rgb(255, 231, 217); 
} 
.flxpanel { 
    padding: 0 18px; 
    background-color: white; 
    max-height: 0; 
    overflow: hidden; 
    transition: 0.6s ease-in-out; 
    opacity: 0; 
} 
.flxpanel.show { 
    opacity: 1; 
    max-height: 500px; 
} 
.flxpanel.hide { 
    opacity: 0; 
    height: 0; 
} 

と私のページに次のコード

<p><button class="flxaccordion">Satellite</button></p> 
<div class="flxpanel"> 
<p>Multi disc Floor Grinders and Polishers with passive or active heads</p> 
</div> 
<p><button class="flxaccordion">Meteor</button></p> 
<div class="flxpanel"> 
<p>Small Single Head Floor Grinders</p> 
</div> 
<p><button class="flxaccordion">GrinderTec</button></p> 
<div class="flxpanel"> 
<p>Hand Held Floor Grinders</p> 
</div> 

<script type="text/javascript">// <![CDATA[ 
var acc = $(".flxaccordion"); //jquery flxaccordion 

acc.click(function() //when we click on element 
{ 
    $(this).toggleClass("active"); //it is active 
    $('.flxpanel').not($(this).next()).toggleClass("show"); 
    }); 
// ]]></script> 

を持っています各ボタンの後に。

をtoggleClass("hide");に変更し、アクティブボタンの後の要素をtoggleClass("show");に変更するように別の行を追加する必要があります。

提案がありますか？

Answer 1

あなたのjqueryのスクリプトは、以下のようなものに変更する必要があります：

$(document).ready(function(){ 
var acc = $(".flxaccordion"); //jquery flxaccordion 
    acc.click(function() { 
    $(this).toggleClass("active"); 
    $(this).parent().next().toggleClass('show'); 
}); 
});