J'ai pu obtenir une réponse appropriée pour modifier le code de la question précédente.
Lien vers la question précédente : Ajouter et supprimer des classes pour plusieurs éléments
Maintenant, j'ai développé le code précédent et ajouté du contenu, lorsque l'on clique sur l'icône, son contenu sera affiché ou masqué.
Le problème avec ce code est qu'en cliquant sur n'importe quelle icône disponible, le contenu de toutes les icônes est affiché ou masqué.
Mais ce n'est pas ce que je veux. Je souhaite afficher le contenu correspondant en cliquant sur chaque icône, et en cliquant sur une autre icône, tout le contenu sera masqué et seul le contenu lié à l'icône cliquée sera affiché.
$('body').on('click', '.icon_product', function() { $(this).toggleClass("change_icon-product"); $(this).parent().siblings().find('.icon_product').removeClass("change_icon-product"); $(this).find(".txt-content").toggleClass("Toggle_txt-content"); });
.icon_product { display: inline-block; cursor: pointer; position: relative; padding: 15px; margin-top: 0px; } .icon-line1_product, .icon-line2_product { width: 35px; height: 5px; background-color: #f00; margin: 6px 0; border-radius: 10px; transition: all 0.6s ease-in-out; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; } .icon-line2_product { transform: rotate(90deg) translate(-11px, 0px); -webkit-transform: rotate(90deg) translate(-11px, 0px); -moz-transform: rotate(90deg) translate(-11px, 0px); -o-transform: rotate(90deg) translate(-11px, 0px); -ms-transform: rotate(90deg) translate(-11px, 0px); } .change_icon-product .icon-line1_product { transform: rotate(45deg) translate(8px, 0px); -webkit-transform: rotate(45deg) translate(8px, 0px); -moz-transform: rotate(45deg) translate(8px, 0px); -o-transform: rotate(45deg) translate(8px, 0px); -ms-transform: rotate(45deg) translate(8px, 0px); } .change_icon-product .icon-line2_product { transform: rotate(-45deg) translate(8px, 0px); -webkit-transform: rotate(-45deg) translate(8px, 0px); -moz-transform: rotate(-45deg) translate(8px, 0px); -o-transform: rotate(-45deg) translate(8px, 0px); -ms-transform: rotate(-45deg) translate(8px, 0px); } /* * * * */ .txt-content { display: none; } .Toggle_txt-content { display: block; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <section> <div class="main-content_product"> <div class="icon_product"> <div class="icon-line1_product test"></div> <div class="icon-line2_product test"></div> <div class="txt-content"> <h3>Lorem ipsum</h3> <p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias suscipit necessitatibus nobis harum voluptatum fuga, nam tempore exercitationem dolore placeat. </p> </div> </div> </div> <div class="main-content_product"> <div class="icon_product"> <div class="icon-line1_product test"></div> <div class="icon-line2_product test"></div> <div class="txt-content"> <h3>Lorem ipsum</h3> <p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias suscipit necessitatibus nobis harum voluptatum fuga, nam tempore exercitationem dolore placeat. </p> </div> </div> </div> <div class="main-content_product"> <div class="icon_product"> <div class="icon-line1_product test"></div> <div class="icon-line2_product test"></div> <div class="txt-content"> <h3>Lorem ipsum</h3> <p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias suscipit necessitatibus nobis harum voluptatum fuga, nam tempore exercitationem dolore placeat. </p> </div> </div> </div> </section>
Vous souhaitez donc également supprimer d'autres contenus, si un autre contenu est ouvert, ajoutez simplement une ligne de code :
Une fois qu'une autre ligne s'ouvre, la ligne ci-dessus supprime ou masque les autres contenus.
Voici la démo :