Tengo el siguiente javascript:
<script> $(document).ready(function() { if($('div.trigger').length > 0) { $('div.trigger').click(function() { if ($(this).hasClass('open')) { $(this).removeClass('open'); $(this).addClass('close'); $(this).next().slideDown(100); return false; } else { $(this).removeClass('close'); $(this).addClass('open'); $(this).next().slideUp(100); return false; } }); } }); </script>Por ejemplo, a continuación tengo 2 grupos (tengo muchos más grupos). Cuando hago clic, por ejemplo, en el grupo " Producten ", quiero cerrar (contraer) el grupo " Algemeen " y todos los demás grupos eventuales cuando estén abiertos. Intenté muchas cosas, pero no me gusta mucho javascript, así que si tienes un pequeño consejo o solución...
<div class="trigger open"><a href="#">Algemeen</a></div> <div class="cnt"> <a href="dashboard.php" target="content">Dashboard</a><br> <a href="admin_memo.php" target="content">Memo's</a><br> </div> <div class="clearing"> </div> <div class="trigger open"><a href="#">Producten</a></div> <div class="cnt"> <a href="product_home.php" target="content">Product zoeken</a><br> <a href="product_new.php" target="content">Product aanmaken</a><br> <a href="product_sort.php" target="content">Producten volgorde</a><br> <a href="unit_new.php" target="content">Product eenheden</a><br> <a href="option_new.php" target="content">Productopties</a><br> <a href="option_sort.php" target="content">Productopties volgorde</a><br> </div> <div class="clearing"> </div>Aquí hay una forma mucho más simple, usando transition css y un poco de jquery.
$(document).ready(function() { $('div.trigger').click(function() { $(this).next().toggleClass('open'); $('div.trigger').not($(this)).next().removeClass('open'); }); }); .box { transition: height .5s; height: 0px; background: #333; } .trigger { margin-top: 15px; padding: 10px; cursor: pointer; } .box.open { height: 100px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class='trigger'>trigger</div> <div class='box'></div> <div class='trigger'>trigger</div> <div class='box'></div> <div class='trigger'>trigger</div> <div class='box'></div>