I have multiple elements that reveal a div when clicked. The issue is that if all elements are clicked, all divs open instead of just the one that was clicked.
This is my jQuery code:
<script>
$(document).ready(function() {
$('.servicemark').click(function() {
console.log($(this).attr('data-toggle'));
var type = $(this).attr('data-toggle');
$('.'+type).slideToggle("slide");
});
});
</script>
And here is my HTML/PHP code:
<section class="def-section home-services">
<div class="container">
<div class="row">
<?php
foreach($blocks as $block) {
$images = json_decode($block->images);
echo '
<!-- === SERVICE ITEM === -->
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 servicemark" data-toggle="'.$block->alias.'" style="cursor:pointer;">
<div class="service-mark-border-top"></div>
<div class="service-mark-border-right"></div>
<div class="service-mark-border-bottom"></div>
<div class="service-mark-border-left"></div>
<div class="service">
<div class="service-icon">
<img src="cms/'.$images->image_intro.'" />
</div>
<h3>'.$block->title.'</h3>
<div class="service-text">
<p>'.$block->introtext.'</p>
</div>
</div>
</div>
';
}
?>
<div class="row zee-container-vervoer" style="display:none;">
<div class="text">
<p>Zee container vervoer Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc est neque, egestas et aliquam vitae, elementum eget neque. Donec fringilla purus nec viverra viverra. Nullam volutpat purus id risus sodales, id sodales sapien molestie. Phasellus bibendum massa et tellus aliquet rhoncus. Suspendisse accumsan, velit sed lacinia iaculis, sem neque condimentum magna, sed volutpat quam metus sed massa. Curabitur lobortis ligula sed consectetur consequat. Praesent suscipit, metus ac efficitur molestie, erat ante laoreet dolor, ut mole...
</div>
</div>
<div class="row gevoelige-lading" style="display:none;">
<div class="text">
<p>Speciale ladingLorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc est neque, egestas et aliquam vitae, elementum eget neque. Donec fringilla purus nec viverra viverra. Nullam volutpat purus id risus sodales, id sodales sapien m...
</div>
</div>
<div class="row temperatuur-gevoelige-lading" style="display:none;">
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc est neque, egestas et aliquam vitae, elementum eget neque. Donec fringilla purus nec viverra viverra. Nullam volutpat purus id risus sodales, id sodales sapien ...
</div>
</div>
<div class="row explosieve-lading" style="display:none;">
<div class="text">
<p>Gevaarlijke stoffenLorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc est neque, egestas et aliquam vitae, elementum eget neque. Donec fringilla purus nec viverra viverra. Nullam volutpat purus id risus sodale...
</div>
</div>
</div>
</section>
I am currently filtering everything by the alias of the correct element (class name same as alias). How can I ensure that only the currently opened element remains open while closing all others?