Deux divisions identiques avec jQuery slideToggle, mais une seule fonctionne.

Question

apprécierait vraiment un peu d'aide si possible?

Merci d'avance à tous ceux qui prennent le temps de répondre!

Voici mon problème.

J'ai deux divs identiques qui s'asseoir dans une rangée. Ils contiennent un h3 et un p. Au clic du h3 je veux que ça glisseToggle l'affichage de la p. Le slideToggle fonctionne bien sur la première div mais sur la seconde div il n'a aucun effet.

Des idées où je pourrais me tromper?

Mon code est ci-dessous ...

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

Vous avez deux divs avec le même identifiant <div id="accordionPanel">, utilisez une classe à la place: <div class="accordionPanel">, votre javascript fera référence à l'élément en utilisant la classe à la place:

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

Answer 2

Il suffit de remplacer $('#accordionPanel')-$(document) dans votre code

$(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

Vous avez plus de 1 HTML e avec la même valeur de , c'est-à-dire 'accordéonPanel'. Vous devriez toujours avoir un identifiant unique pour tous les éléments HTML. Vous pouvez donc utiliser les noms de classes ici pour lier l'action.

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