jQueryのslideToggleと2つの同一ディビジョンがありますが、そのうちの1つだけが動作しています。可能であれば

Question

本当に助けていただければ幸いですか？

応答に時間がかかる人には、事前に感謝します！

これは私の問題です。

私は2つの同じdivが一列に並んでいます。彼らはh3とpを含んでいます。 h3をクリックするとスライドします。pの表示をトグルします。

slideToggleは最初のdivで正常に機能しますが、2番目のdivでは全く影響しません。

私が間違っている可能性のあるアイデアは何ですか？

私のコードは以下の通りです...

HTML

<section class="twocol"> 
<div id="accordionPanel"> 
<h3 class="accordionControl">This is the title of the content area</h3> 
<p class="accordionText">Lorem ipsum dolor sit amet, no per erant dicant tritani. Et reque aperiam fabulas nec. Vim ne pericula tincidunt. Id perpetua constituam quo, feugiat pertinax referrentur at per.</p> 
</div> 
</section> 

<section class="twocol"> 
<div id="accordionPanel"> 
<h3 class="accordionControl">This is the title of the content area</h3> 
<p class="accordionText">Lorem ipsum dolor sit amet, no per erant dicant tritani. Et reque aperiam fabulas nec. Vim ne pericula tincidunt. Id perpetua constituam quo, feugiat pertinax referrentur at per.</p> 
</div> 
</section> 

CSS

#accordionPanel { 
@include lightgreygradient;} 

.accordionControl { 
&:hover {cursor: pointer;} 
} 

.accordionText {display:none;} 

Javascriptを

$('#accordionPanel').on('click', '.accordionControl', function (e) { 
e.preventDefault(); 
$(this).next('.accordionText').not(':animated').slideToggle(); 
}); 

Answer 1

あなたは、同じid <div id="accordionPanel">を持つ2つのdiv要素を持っている代わりにクラスを使用する：<div class="accordionPanel">、その後、あなたのjavascriptの代わりにクラスを使用して要素を参照します：

$('.accordionPanel').on('click', '.accordionControl', function (e) { 
    e.preventDefault(); 
    $(this).next('.accordionText').not(':animated').slideToggle(); 
}); 

Answer 2

をちょうどあなたのコード内で$(document)に$('#accordionPanel')を交換

あなたは1 HTML形式の電子以上のものを持っている

$(document).on('click', '.accordionControl', function (e) { 
 
e.preventDefault(); 
 
$(this).next('.accordionText').not(':animated').slideToggle(); 
 
});

<section class="twocol"> 
 
<div id="accordionPanel"> 
 
<h3 class="accordionControl">This is the title of the content area</h3> 
 
<p class="accordionText">Lorem ipsum dolor sit amet, no per erant dicant tritani. Et reque aperiam fabulas nec. Vim ne pericula tincidunt. Id perpetua constituam quo, feugiat pertinax referrentur at per.</p> 
 
</div> 
 
</section> 
 

 
<section class="twocol"> 
 
<div id="accordionPanel"> 
 
<h3 class="accordionControl">This is the title of the content area</h3> 
 
<p class="accordionText">Lorem ipsum dolor sit amet, no per erant dicant tritani. Et reque aperiam fabulas nec. Vim ne pericula tincidunt. Id perpetua constituam quo, feugiat pertinax referrentur at per.</p> 
 
</div> 
 
</section> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

Answer 3

同じ値のid、すなわち「accordionPanel」を有する。すべてのHTML要素には常に一意のIDが必要です。したがって、ここではクラス名を使用してアクションをバインドすることができます。

$('.twocol').on('click', '.accordionControl', function (e) { 
    e.preventDefault(); 
    $(this).parent('.twocol').find('.accordionText').not(':animated').slideToggle(); 
});