Estoy configurando algunos jquery slideToggle para un sistema de filtro que tengo y estoy tratando de que usen las mismas clases. Habrá alrededor de 5 de la misma diapositiva en la página, pero cuando cierro / abro uno de ellos, los cierra todos y me pregunto cómo puedo ajustar el javascript para que cada uno se cierre individualmente.
<div class="tc-facet-header tc-toggle-show"> <h3>Header One</h3> <span><i class="bi bi-chevron-down"></i><i class="bi bi-chevron-up"></i></span> </div> <div class="tc-facet tc-facet-open"> Fitler Content 1 </div> <div class="tc-facet-header tc-toggle-show"> <h3>Header two</h3> <span><i class="bi bi-chevron-down"></i><i class="bi bi-chevron-up"></i></span> </div> <div class="tc-facet tc-facet-open"> Fitler Content 2 </div>El JS que uso es
<script> $(document).ready(function(){ var $content = $(".tc-facet").show(); $(".tc-facet-header").on("click", function(e){ $(this).toggleClass("tc-toggle-show"); $(this).toggleClass("tc-toggle-hide"); $content.slideToggle(); }); });Cuando hago clic en un encabezado h3 de cualquiera de los dos, se abrirán/cerrarán los dos divs .tc-facet en lugar de solo en el que hago clic.
Su código jquery actual está dirigido a todas .tc-facet , por eso. Debe apuntar a cada .tc-facet individual. Prueba este código
$(document).ready(function(){ $(".tc-facet-header").on("click", function(e){ $(this).toggleClass("tc-toggle-show"); $(this).toggleClass("tc-toggle-hide"); $(this).next(".tc-facet").slideToggle(); }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="tc-facet-header tc-toggle-show"> <h3>Header One</h3> <span><i class="bi bi-chevron-down"></i><i class="bi bi-chevron-up"></i></span> </div> <div class="tc-facet tc-facet-open"> Fitler Content 1 </div> <div class="tc-facet-header tc-toggle-show"> <h3>Header two</h3> <span><i class="bi bi-chevron-down"></i><i class="bi bi-chevron-up"></i></span> </div> <div class="tc-facet tc-facet-open"> Fitler Content 2 </div>Han pasado algunos años desde que miré cualquier código jquery, pero por lo que puedo ver, la razón por la que los ve alternar es porque está ejecutando la función slideToggle en la variable $content que configuró anteriormente, que incluye todos de las coincidencias en el momento en que se establece la variable.
Si todo lo que intenta hacer es ejecutar la función slideToggle en el lapso cuando se hace clic en el encabezado, puede hacer esto:
$(document).ready(function() { $(".tc-facet-header").on("click", function(e) { $(this).next().slideToggle(); }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="tc-facet-header tc-toggle-show"> <h3>Header One</h3> <span><i class="bi bi-chevron-down"></i><i class="bi bi-chevron-up"></i ></span> </div> <div class="tc-facet tc-facet-open">Fitler Content 1</div> <div class="tc-facet-header tc-toggle-show"> <h3>Header two</h3> <span><i class="bi bi-chevron-down"></i><i class="bi bi-chevron-up"></i ></span> </div> <div class="tc-facet tc-facet-open">Fitler Content 2</div>Siempre que el lapso siga al encabezado, el lapso siempre se alternará.