jQuery slide up open div before sliding down new one

StackOverflow https://stackoverflow.com/questions/16369419

  •  14-04-2022
  •  | 
  •  

Question

I have a fiddle with my problem. I have a list of links and each one opens a different slideshow. What I want is, when clicking any link, check if there's an open slideshow and close it (sliding up) before the new div slides down. The way I have it right now is sort of working but the new divs appear to slide up over the open one, instead of first closing the existing slideshow (up) and then sliding down the new one.

HTML

<body>
  <div id="slide1-project" class="flexslider">
    <div class="close-project">Close (X)</div>
    <div>Slideshow 1</div>
  </div>

  <div id="slide2-project" class="flexslider">
    <div class="close-project">Close (X)</div>
    <div>Slideshow 2</div>
  </div>

  <div id="slide3-project" class="flexslider">
    <div class="close-project">Close (X)</div>
    <div>Slideshow 3</div>
  </div>

  <div id="work-list">
    <ul>
      <li class="client" id="slide1">Section1</li>
      <li class="client" id="slide2">Section2</li>
      <li class="client" id="slide3">Section3</li>
    </ul>
  </div><!-- End work-list -->

</body>

JS

$(document).ready(function() {

  $(".close-project").click(function(){
    $(".flexslider").slideUp("slow");
    $("#work-list ul li").removeClass("current");
  });

  $(".client").click(function() {
    var project = this.id;
    var project_id = '#' + project + '-project';
    $(".flexslider").slideUp('slow');
    $(project_id).slideDown('slow', function() {
        $(project).addClass("current");
    });
  });
});

Could someone help me correct the code?

Also, I'd like for the link to change color when the corresponding slide is open, but it doesn't work the way it is now. If someone could assist me with that as well I'd appreciate it.

Was it helpful?

Solution

I think you're having issues because you've multiple items sliding up at a given time. check this jsfiddle for solution

javascript

     $(function () {
        $(".close-project").click(function () {
           $(".flexslider").slideUp("slow");
           $("#work-list ul li").removeClass("current");
        });

        $(".client").click(function () {
           var project = this.id;
           var project_id = '#' + project + '-project';

           var elem  = $(".flexslider:visible").length? $(".flexslider:visible") : $(".flexslider:first")
           elem.slideUp('slow', function () {
              $(project_id).slideDown('slow', function () {
                 $(project).addClass("current");
              })
           });

        });
     });
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top