If you visit this website, you will notice that I am implementing a slideToggle function on various elements. To ensure that only one element is visible at a time, I have crafted the following code:
$(document).ready(function() {
$( ".toggle" ).click(function() {
if ($(this).next().is(":visible"))
$(this).next().slideToggle("slow");
else {
$(".toggle").each(function() {
if ($(this).next().is(":visible"))
$(this).next().slideToggle("slow");
});
var tog = $(this).attr("data-class");
$("."+tog).slideToggle("slow");
}
});
});I want to replicate this behavior with a carousel, but I'm struggling to hide previously toggled divs that are not adjacent to $(this). Here's what I've been trying to achieve:
$( ".toggle2" ).click(function() {
//Slide up if open
if ($("."+tog).is(":visible"))
$("."+tog).slideToggle("slow");
//Slide up every visible
else {
$(".toggle2").each(function() {
if ($("."+tog).next().is(":visible"))
$("."+tog).next().slideToggle("slow");
});
// slide Down
var tog = $(this).attr("data-class");
$("."+tog).slideToggle("slow");
}
});.reszlet {
display: none;
background: #F9F9F9;
border: 1px solid #D5D5D5;
box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 0.18);
padding: 15px 15px 10px 15px;
margin-bottom: 30px; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="carousel">
<div class="carousel-item item1">
<div class="overlay">
<h3>Ginappi youtube videók</h3>
<button class="btn-light toggle2" data-class="munka1" type="button" >
Részletek
</button>
</div>
</div>
<div class="carousel-item item2">
<div class="overlay">
<h3>Just nature</h3>
<button class="btn-light toggle2" data-class="munka2" type="button" >
Részletek
</button>
</div>
</div>
<div class="carousel-item item3">
<div class="overlay">
<h3>Nekem is lesz gyerekem!</h3>
<button class="btn-light toggle2" data-class="munka3" type="button" >
Részletek
</button>
</div>
</div>
<div class="carousel-item item4">
<div class="overlay">
<h3>Pelusfilm - Nyakig ülünk benne</h3>
<button class="btn-light toggle2" data-class="munka4" type="button" >
Részletek
</button>
</div>
</div>
</div>
<div id="videos">
<div id="ginappi" class="munka1 yt reszlet col-12" >
<iframe width="100%" src="https://www.youtube.com/embed/kRoGnxw-tFI" frameborder="0" allowfullscreen></iframe>
</div>
<div id="nature" class="munka2 yt reszlet col-12" >
<iframe width="100%" src="https://www.youtube.com/embed/nPu-v2kaG9g" frameborder="0" allowfullscreen></iframe>
</div>
<div id="gyerek" class="text-center yt munka3 reszlet col-12" >
<iframe width="100%" src="https://www.youtube.com/embed/cpMIp0bDp6g" frameborder="0" allowfullscreen></iframe>
</div>
<div id="pelus" class="text-center yt munka4 reszlet col-12">
<iframe width="100%" src="https://www.youtube.com/embed/GXWt9hrvnJA" frameborder="0" allowfullscreen></iframe>
</div>
</div>It appears that the previously shown items are not being hidden as intended.