jQuery slideToggle jumps back

Question

I use slideToggle for a simple accordion, but when clicked on the opened accordion to close, it closes and than jumps back to opened.

HTML


    First title
      
        Item 1
        Item 2  
        Item 3  
    
  

    First title
     
        Item 1
        Item 2
        Item 3
    


    First title
    
        Item 1
        Item 2
        Item 3

JAVASCRIPT

$('.footer-menu').hide();
$('.footer-title').click(function(){
    $('.footer-menu').slideUp();
    $(this).next('.footer-menu').slideToggle();
});

Demo: CodePen

user_10606400 · Answer

You can check if the next element where the click event has occurred is visible or not depending on this move $('.footer-menu').slideUp(); line inside if condition.

Demo Code:

$('.footer-menu').hide();
$('.footer-title').click(function() {
  var isOpen = $(this).next('.footer-menu').is(":visible"); //check if the next elemnt is visible (means we are closing it)
  if (!isOpen) {
    $('.footer-menu').slideUp();
  }
  $(this).next('.footer-menu').slideToggle();
});



  First title
  
    Item 1
    Item 2
    Item 3
  


  First title
  
    Item 1
    Item 2
    Item 3
  


  First title
  
    Item 1
    Item 2
    Item 3

jQuery slideToggle jumps back

1 Answers