0
votes

jQuery bascule div un par un avec la même classe

Je veux basculer showhide code> div un par un lorsque je clique sur lien fort>. J'ai essayé trouver () code> suivant () code> pour cibler le div. Mais pas capable d'atteindre le résultat souhaité. Aidez-moi à y parvenir.

Pour plus de clarification, laissez tomber votre commentaire. P>

p>



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="link">
    <div class="divider">
        <a href="#">Link 1</a>
    </div>
     <div class="divider">
        <a href="#">Link 2</a>
    </div>
    <div class="divider">
        <a href="#">Link 3</a>
    </div>
</div>
<div class="link-content">
    <div class="divider-desc">
        <div class="showhide">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        </div>
        <div class="showhide">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        </div>
        <div class="showhide">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        </div>
    </div>
</div>

javascript jquery html toggle

2 commentaires

Voulez-vous dire Basculer Say, le Moyen Sildhide Si le lien 2 est cliqué ou affichez tous les éléments Showhide si un lien est cliqué ou? (pourrait mettre à jour la question au lieu d'un autre commentaire)

@Pault. Si je clique sur Link, un premier showhide sera visible de la même manière que deux et trois

3 Réponses :

0
votes

Try below code:

$(document).ready(function() {
    $('.showhide').hide();
    $('.divider a').click(function(e) {
      e.preventDefault();
      //$(".showhide").slideToggle();
      $(this).parent().parent().next().find(".showhide").slideToggle();
      console.log($(this).parent().parent().next().find(".showhide"))
    });
  });

0 commentaires

2
votes

Vous devez sélectionner par index. Utilisez .eq () code> pour sélectionner un par un.

p>



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="link">
    <div class="divider">
        <a href="#">Link 1</a>
    </div>
     <div class="divider">
        <a href="#">Link 2</a>
    </div>
    <div class="divider">
        <a href="#">Link 3</a>
    </div>
</div>
<div class="link-content">
    <div class="divider-desc">
        <div class="showhide">
           1  Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        </div>
        <div class="showhide">
           2  Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        </div>
        <div class="showhide">
           3  Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        </div>
    </div>
</div>

2 commentaires

ici son travail. Si je m'intègre dans mon site Web WordPress, seule la première cible DIV lorsque cliquez sur Link 2, Link 3

Oui peux. Merci

0
votes

Vous pouvez obtenir l'index de l'élément cliqué de chaque code> en une fois:

p>



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="divider"><a href="https://stackoverflow.com/questions/59024393/jquery-toggle-div-one-by-one-with-the-same-class#" target="_blank">Link 1</a></div>
<div class="divider"><a href="#">Link 2</a></div>
<div class="divider"><a href="#">Link 3</a></div>

<div class="showhide">1111</div>
<div class="showhide">2222</div>
<div class="showhide">3333</div>

0 commentaires