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

would appreciate if possible?

thanks in advance takes time respond!

here problem.

i have 2 identical divs sit in row. contain h3 , p. on click of h3 want slidetoggle display of p.

the slidetoggle works fine on first div on second div has no affect @ all.

any ideas might going wrong??

my code below...

html

<section class="twocol"> <div id="accordionpanel"> <h3 class="accordioncontrol">this title of 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 @ per.</p> </div> </section>  <section class="twocol"> <div id="accordionpanel"> <h3 class="accordioncontrol">this title of 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 @ 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();   }); 

you have 2 divs same id <div id="accordionpanel">, use class instead : <div class="accordionpanel">, javascript reference element using class instead :

$('.accordionpanel').on('click', '.accordioncontrol', function (e) {     e.preventdefault();     $(this).next('.accordiontext').not(':animated').slidetoggle();   });