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

Question

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!

Answer 1

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

Answer 2

is there any specific reason you use event.stopPropagation() ? that would block the event from bubbling up.. Try event.preventDefault();

Answer 3

try

$(".chatHeader").not('#searchText').on('click', function() { ...

ive seen a conflict between slideUp and slideToggle