Problème : l’élément sur lequel on souhaite placer le click n’accepte qu’un seul événement (on ne peut cliquer qu’une fois dessus. Au-delà, le clic ne fonctionne plus. Embêtant quand on veut faire de l’ouvrir/fermer…).
Solution: doubler l’élément sur lequel se fait l’événement click
.
1 2 3 4 5 6 7 8 9 10 |
<div class="offer-benefit-heading"> <h2>Les avantages du pack Premium</h2> <span class="more"> <span class="open">> En savoir plus</span> <span class="close">> En savoir plus</span> </span> </div> <div class="offer-benefit" data-display="hidden"> [...] </div> |
1 2 3 4 5 6 7 8 |
.offer-benefit{ &[data-display="hidden"]{ display: none; } &[data-display="shown"]{ // nada } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
jQuery(document).ready(function(){ var eClose = jQuery('.more .close'); eOpen = jQuery('.more .open'); eOfferBenefitHeading = jQuery('.offer-benefit-heading'); eOfferBenefit = jQuery('.offer-benefit'); eClose.hide(); eOfferBenefitHeading.on('click', '.open', function(){ eClose.show(); eOpen.hide(); eOfferBenefit.attr('data-display', 'shown'); }); eOfferBenefitHeading.on('click', '.close', function(){ eClose.hide(); eOpen.show(); eOfferBenefit.attr('data-display', 'hidden'); }); }); |