I've got the following 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>
For example below I've got 2 groups (have many more groups). When I click for instance the group "Producten" I want to close (collapse) the group "Algemeen" and all eventual other groups when they where open. Tried many things but I'm not that much in to javascript, so if you goeroe's have a little advice or solution...
<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>
Here's a much simpler way, using css transition and a little 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>