Search code examples
jqueryeffectsslideupstoppropagation

jQuery - .slideUp() not works after event.stopPropagation();

I have a problem with event.stopPropagation (), in my code: (! When put. Show () after this event works perfectly, however, as put. SlideUp () does not work! What I truly want is when the user click the search bar and the same body and the chat is hidden, it must appear with the effect slideUp (), If I remove the stopPropagation, clicking in the search bar of your body chat also disappear as this within the event of the div.

See jsfiddle Here

$(".chatHeader").on('click', function() {
       $('.chatBody').slideToggle();
    });


    $('#searchText').click(function(e) {
      event.stopPropagation();    
      $('.chatBody').show();
        // $('.chatBody').slideUp(); not works
    });

Who can help me with this, I would be very grateful for your time invested on it!

Thank you!

Solution

  • This one is tricky. Read that :

    "Hide the matched elements with a sliding motion."

    This is taken from the jquery doc of slideUp: http://api.jquery.com/slideUp/

    In other word, you need to use slideDown() if you want the window to show.

    "Display the matched elements with a sliding motion."

    http://api.jquery.com/slideDown/

    Fiddle