hajzso hajzso - 6 months ago 13
jQuery Question

slideToggle previously shown items without next()

On this site I want to do a slideToggle on various elements, and hide the next visible toggled element first. (So only one shows at once) I could do this with 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");
}
});
});

.rolunk .lead {
font-size: 14px;
line-height: 24px;
text-align: justify;
margin-top: 15px; }

.rolunk h6 {
cursor: pointer;
margin: 0;
padding: 0;
margin: 0; }

.rolunk h6:hover {
color: #FF2D0D; }

.rolunk a:hover {
color: #FF2D0D; }

.box {
background-color: #F9F9F9;
border: 1px solid #DEDEDE;
display: none;
padding: 15px;
margin-bottom: 15px; }
.box a {
display: inline-block;
text-decoration: none;
color: rgba(0, 0, 0, 0.5);
margin-bottom: 10px; }
.box a:hover {
color: #FF2D0D; }
.box a:last-child {
margin-bottom: 0px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- !!! Szolgáltatásaink !!! -->
<div class="clear container-full rolunk">
<div class="col-12 text-center">
<h6 class="text-center toggle" data-class="slide1">Dokumentum- pályázati- és kisfilmek</h6>
<div id="doku_box" class="clear col-12 box slide1">
<a href="https://www.youtube.com/watch?v=9VefT2-liws">Két utca - Egy motoros korlátai</a><br />
<a href="https://www.youtube.com/watch?v=TRIXVS63AMI">Üsd még Bözse!</a><br />
<a href="https://www.youtube.com/watch?v=GXWt9hrvnJA">Pelusfilm - Nyakig ülünk benne</a><br />
<a href="https://www.youtube.com/watch?v=cpMIp0bDp6g">Nekem is lesz gyerekem</a>
</div>

<h6 class="text-center toggle" data-class="slide2">Reklámfilmek</h6>
<div id="reklam_box" class="clear col-12 box slide2">
<a href=" https://www.youtube.com/watch?v=l6u4H_V01YA">Riporter- és operatőrképzés Debrecenben</a>
</div>

<h6 class="text-center toggle" data-class="slide3">Webvideók</h6>
<div id="webvid_box" class="clear col-12 box slide3">
<a href="https://www.youtube.com/c/ginappi">Ginappi videók</a>
</div>

<h6 class="text-center toggle" data-class="slide4">Esküvői videók</h6>
<div id="esku_box" class="clear col-12 box slide4">
<a href="https://www.youtube.com/watch?v=LE-qYhaN2e8">Fogd meg a kezem, ez egy szép nap gyere velem</a>
</div>

<h6 class="text-center toggle" data-class="slide5">Pocakfilm</h6>
<div id="pocak_box" class="clear col-12 box slide5">
<p>123</p>
<a href="http://pocakfilm.com" target="_blank">pocakfilm.com</a>
</div>

<h6 class="text-center toggle" data-class="slide6">Egyedi elképzelések</h6>
<div id="egyedi_box" class="clear col-12 box slide6">
<p>A1234</p>
</div>

</div>
</div>
</div>





I want to do this once more, with the carousel, but I can't figure out how to hide the previously toggled div's that are not next to $(this), here is where I want to do the same:



$( ".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>





As you can see, it doesn't hide the previously shown items.

Answer

You can add some kind of identifier to the "actual/open" div, in this case I use a classname.

$(".toggle2").click(function() {
    var tog = $(this).attr("data-class");
    
    //Hide the actual/open element and remove the identifier
    $('.open').slideUp("slow").removeClass('open');
  
    //Open the new element and assign the identifier
    $("." + tog).slideToggle("slow").addClass('open');
});
.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>


Edit to adress the comment

You can check if the item has the class open ... Like this:

$(".toggle2").click(function() {
  var tog = $(this).attr("data-class");

  //Check if it's already open
  if (!$("." + tog).hasClass('open')) {
      //Hide the actual/open element and remove the identifier
      $('.open').slideUp("slow").removeClass('open');
      //Open the new element and assign the identifier
      $("." + tog).slideToggle("slow").addClass('open');
  }
});
.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>