CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Mona Coder
Mona Coder

Reputation: 6316

Slide toggling a panel when it is already open (slide down)

How can I fix the issue on clicking on the on the .flip for second time to close (slide up) the panel?

As you can see I am able to slide toggle all panels but when I try to close open panel is close it first and re open it.

$(document).ready(function() {
  $(".flip").click(function() {
    $(".panel").slideUp("slow");
    $(this).next(".panel").slideToggle("slow");
  });
});
.flip {
  padding: 5px;
  text-align: center;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
}

.panel {
  padding: 5px;
  text-align: center;
  background-color: #ddd;
  border: solid 1px #c3c3c3;
}

.panel {
  padding: 10px;
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flip">Flip 1</div>
<div class="panel">Hello Flip 1!</div>
<div class="flip">Flip 2</div>
<div class="panel">Hello Flip 2!</div>
<div class="flip">Flip 3</div>
<div class="panel">Hello Flip 3!</div>
<div class="flip">Flip 4</div>
<div class="panel">Hello Flip 4!</div>

Upvotes: 1

Views: 48

Answers (1)

Hikarunomemory
Hikarunomemory

Reputation: 4305

You can target the one that should be slideToggle() and slideUp() others.

$(document).ready(function() {
  $(".flip").click(function() {
    let $this = $(this).next(".panel");
    $(".panel").not($this).slideUp("slow");
    $this.slideToggle("slow");
  });
});
.flip {
  padding: 5px;
  text-align: center;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
}

.panel {
  padding: 5px;
  text-align: center;
  background-color: #ddd;
  border: solid 1px #c3c3c3;
}

.panel {
  padding: 10px;
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flip">Flip 1</div>
<div class="panel">Hello Flip 1!</div>
<div class="flip">Flip 2</div>
<div class="panel">Hello Flip 2!</div>
<div class="flip">Flip 3</div>
<div class="panel">Hello Flip 3!</div>
<div class="flip">Flip 4</div>
<div class="panel">Hello Flip 4!</div>

Upvotes: 2

Related Questions