Two Identical Divs with jQuery slideToggle, but only one of them is working.

Question

would really appreciate some help if possible?

Thanks in advance to anyone who takes the time to respond!

Here is my problem.

I have two identical divs that sit in a row. They contain an h3 and a p. On click of the h3 I want it to slideToggle the display of the p.

The slideToggle works fine on the first div but on the second div it has no affect at all.

Any ideas where I might be going wrong??

My code is below...

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

You have two divs with the same id <div id="accordionPanel">, use a class instead : <div class="accordionPanel">, then your javascript will reference the element using the class instead :

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