CODEWITHSUNDEEP
javascripthtmljquery
The Dead Man
The Dead Man

Reputation: 5566

call a function when slideDown or slideUp effect has finished

I have a simple dropdown list, I want when the user toggles the dropdown list to show or hide another div using the jquery method slideToggle, unfortunately, I am struggling to solve the problem.

Expected: when the user clicks an icon it should show the list and hide another div (slideDown effect) when the user clicks again for closing the dropdown list (slideUp effect), I want to show the hidden div.

 var link = $('.sprzatanie-link');

  link.click(function(e) {
    e.preventDefault();
    list.slideToggle("fast", function(){
      console.log('do something')
      if("slideDown"){
        $('.dezynfekcja-dropdown').hide();
      }else if("slideUP"){
        $('.dezynfekcja-dropdown').show();
      }
    });
  });

I tried adding a callback function but I don't know how to check the slide effect if it's slideDown or slideUp.

Any idea will be appreciated.

Upvotes: 0

Views: 102

Answers (1)

Lzh
Lzh

Reputation: 3635

Once toggle finishes it basically hides or shows the element being toggled. So in the complete callback you can simply check if your element is shown or hidden.

 var link = $('.sprzatanie-link');

  link.click(function(e) {
    e.preventDefault();
    list.slideToggle("fast", function(){
      // `this` refers to the DOM element being toggled.
      // We can use `is(":visible")` to check if it visible or not
      let isVisible = $(this).is(":visible");

      // show console message that tells us if element is hidden or visible
      console.log(this.innerText, ' is now ', isVisible);

      // use isVisible to do whatever you want show/hide etc
      if(isVisible) {
        $('.dezynfekcja-dropdown').hide();
      } else {
        $('.dezynfekcja-dropdown').show();
      }
    });
  });

Upvotes: 1

Related Questions