jQuery bascule sur chaque?

Question

Im en utilisant jquery pour basculer certains paragraphes. C'est assez facile avec un seul paragraphe, mais disons que j'ai une configuration très générique. le second paragraphe est initialement caché avec css.

problème

<p>some text</p> 
<p>some more text</p> 
<a href="#" class="more">read more</a> 

<p>some text</p> 
<p>some more text</p> 
<a href="#" class="more">read more</a> 

est que chaque fois que je clique sur l'un des « lire la suite » liens de ses spectacles les tout deuxième alinéa. Je voudrais juste qu'il montre le deuxième paragraphe de l'un cliqué.

très nouveau pour jquery ...

Answer 1

d'abord envelopper vos <p> balises dans un div comme ceci:

<div class='toggleable'> 
    <p>some text</p> 
    <p>some more text</p> 
    <a href="#" class="more">more/less</a> 
</div> 

Avec un peu de CSS:

.toggleable p { 
    display: none; 
} 

Puis le jQuery:

$('.toggleable a.more').click(function() { 
    $(this).siblings('p').toggle(); 
}); 

Devrait le gérer.

Il y a d'autres façons de résoudre cela, bien sûr. Peut-être que vous pourriez mettre les liens en dehors de la div avec le texte et ensuite faire quelque chose comme: $('.more').click(function() { $(this).prev().toggle(); }); ... Beaucoup d'approches. Jetez un oeil aux méthodes DOM traversal de jQuery.

Answer 2

désolé je pense que je peux avoir foiré la structure. son

<p>some text</p> 
<div class="bio> 
<p>some more text</p> 
</div> <a href="#" class="more">read more</a> 

<p>some text</p> 
<div class="bio> 
<p>some more text</p> 
</div> <a href="#" class="more">read more</a> 

i besoin premier <p> montrer toujours comme une sorte d'un experted. le deuxième <p> et tout ultérieur <p> pour afficher uniquement sur le clic de son <a> spécifique merci pour la réponse rapide.