1
votes

Ouverture de listes déroulantes individuelles. Simplifier le code

J'ai 4 boutons déroulants "Plus d'infos" qui affichent plus d'informations en cliquant dessus. Je veux que chacun s'ouvre / se ferme seul sans que les autres ne s'ouvrent / se ferment.

J'ai créé du code jquery qui fonctionne mais le seul moyen que je peux voir pour le faire fonctionner pour chaque bouton est de le répéter pour chaque ID . Je suis sûr qu'il existe un moyen beaucoup plus sec de le terminer.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="showFurther" style="display: none;">
  <p class="extra-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus, officia fugit sapiente omnis aperiam eius rerum veniam, voluptas veritatis delectus, voluptatum dolore molestias aliquid optio ipsam modi debitis corporis. Molestiae!</p>
</div>
<div class="more-benefits-btn-wrapper">
  <span id="extra1-text">More info</span>
  <span class="btn-icon">
   <i class="fal fa-chevron-down">&nbsp;</i>
  </span>
</div>

$(document).ready(function() {
  var moreBtnWrapperEl = $('.more-benefits-btn-wrapper');

  $(moreBtnWrapperEl).click(function() {
    var extraInfoText = $('#extra1-text').text();

    var i = $("i", this);
    $('.showFurther').slideToggle();

    if (extraInfoText === "More info" ? $(this).find('#extra1-text').text('Show less') : $(this).find('#extra1-text').text('More info'));

    i.toggleClass('fa-chevron-up');
    $(this).append(i);
  });
});

jquery html css

0 commentaires

3 Réponses :

1
votes

Pour résoudre ce problème, et conserver votre code «DRY» (qui signifie Don't Repeat Yourself), vous pouvez utiliser la traversée DOM.

jQuery propose de nombreuses méthodes pour trouver des éléments associés. Dans votre cas, vous pouvez obtenir la référence à l'élément .more-Benefits-btn-wrapper sur lequel vous avez cliqué en utilisant le mot-clé this dans le gestionnaire d'événements de clic, puis utiliser find () et prev () pour obtenir les éléments associés. Essayez ceci:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="showFurther">
  <p class="extra-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus, officia fugit sapiente omnis aperiam eius rerum veniam, voluptas veritatis delectus, voluptatum dolore molestias aliquid optio ipsam modi debitis corporis. Molestiae!</p>
</div>
<div class="more-benefits-btn-wrapper">
  <span class="extra-text">More info</span>
  <span class="btn-icon">
    <i class="fal fa-chevron-down">&nbsp;</i>
  </span>
</div>

<div class="showFurther">
  <p class="extra-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus, officia fugit sapiente omnis aperiam eius rerum veniam, voluptas veritatis delectus, voluptatum dolore molestias aliquid optio ipsam modi debitis corporis. Molestiae!</p>
</div>
<div class="more-benefits-btn-wrapper">
  <span class="extra-text">More info</span>
  <span class="btn-icon">
    <i class="fal fa-chevron-down">&nbsp;</i>
  </span>
</div>

<div class="showFurther">
  <p class="extra-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus, officia fugit sapiente omnis aperiam eius rerum veniam, voluptas veritatis delectus, voluptatum dolore molestias aliquid optio ipsam modi debitis corporis. Molestiae!</p>
</div>
<div class="more-benefits-btn-wrapper">
  <span class="extra-text">More info</span>
  <span class="btn-icon">
    <i class="fal fa-chevron-down">&nbsp;</i>
  </span>
</div>

.showFurther {
  display: none;
}

$(document).ready(function() {
  $('.more-benefits-btn-wrapper').click(function() {
    var $wrapper = $(this);        
    $wrapper.prev('.showFurther').slideToggle();        
    $wrapper.find('.extra-text').text(function(i, t) {
      return t == 'More info' ? 'Show less' : 'More info';
    }); 
    $wrapper.find('i').toggleClass('fa-chevron-up');
  });
});

0 commentaires

1
votes

Vous pouvez utiliser une toggleClass pour afficher ou masquer le contenu supplémentaire de votre conteneur. Vous pouvez même modifier le texte de la plage Plus d'infos ou Afficher moins en utilisant la propriété CSS content . Comme ceci:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="more-benefits-btn-wrapper">
      <span class="more-info-span">Content title 1</span>
      <span class="btn-icon">
         <i class="fal fa-chevron-down">&nbsp;</i>
      </span>
      <span class="content-span">Lorem ipsum dolor sit amet</span>
</div>
<div class="more-benefits-btn-wrapper">
      <span class="more-info-span">Content title 2</span>
      <span class="btn-icon">
         <i class="fal fa-chevron-down">&nbsp;</i>
      </span>
      <span class="content-span">Lorem ipsum dolor sit amet</span>
</div>
<div class="more-benefits-btn-wrapper">
      <span class="more-info-span">Content title 3</span>
      <span class="btn-icon">
         <i class="fal fa-chevron-down">&nbsp;</i>
      </span>
      <span class="content-span">Lorem ipsum dolor sit amet</span>
</div>

.more-benefits-btn-wrapper {
  display: block;
  width: 200px;
  padding-bottom: 10px;
}

.more-info-span::after {
  content: 'More info...';
  display: inline-block;
  color: #00f;
  padding-left: 5px;
}

.more-benefits-btn-wrapper.more .more-info-span::after {
  content: 'Show less';
}

.content-span {
  display: none;
}

.more-benefits-btn-wrapper.more .content-span {
  display: block;
}

$(document).ready(function(){
  $('.more-benefits-btn-wrapper').click(function(){
    $(this).toggleClass('more');
  })
});

0 commentaires

0
votes

Si vous encapsulez le bouton show et les avantages btn avec un élément, il s'agira de naviguer vers le parent puis de trouver le seul élément show supplémentaire disponible.

var moreBtnWrapperEl = $('.more-benefits-btn-wrapper');

$(moreBtnWrapperEl).click(function() {
    var extraInfoText = $('#extra1-text').text();

    var i = $("i", this);
    $(this).parent().find('.showFurther').slideToggle();

    if (extraInfoText === "More info" ? $(this).find('#extra1-text').text('Show less') : $(this).find('#extra1-text').text('More info'));

    i.toggleClass('fa-chevron-up');
    $(this).append(i);
});

<div>
    <div class="showFurther" style="display: none;">
        <p class="extra-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus, officia fugit sapiente omnis aperiam eius rerum veniam, voluptas veritatis delectus, voluptatum dolore molestias aliquid optio ipsam modi debitis corporis. Molestiae!</p>
    </div>
    <div class="more-benefits-btn-wrapper">
        <span id="extra1-text">More info</span>
        <span class="btn-icon">
            <i class="fal fa-chevron-down">&nbsp;</i>
        </span>
    </div>
</div>

1 commentaires

Merci pour ce Thiago, je le comprends parfaitement et ça a du sens !!