How to use slidedown and slideup with together

Question

I want to use slideDown and slideUp in jquery, but do not want to use slideToggle on one element. Here is code which I use, but not working correctly

$(".p8").click(function(){

$(".u8").slideDown(300);

$(".u8").slideUp(300);

});

Css I use

<li class="p8">   

 <ul class="u8">    

 <li><div><form><input type="text"></form></div></li>    

 </ul>    

 </li>    

The p8 is css icon, I want when it clicked, slideDown function trigger on u8, when again clicked slideUp function trigger on u8. I has a form in u8 div.

Now If I use slideToggle then slideDown trigger correctly, but when I click on form's input, it goes to slideUp, therefore I do not want to use Toggle.

Answer 1

Try this... and tell me...

Min version:

$(".p8").click(function(){
    if(!$(".u8").hasClass("slided")) return $(".u8").addClass("slided").slideDown(300);
    $(".u8").removeClass("slided").slideUp(300);
});

Extended version:

If you need to do other, if icon is slidedUp or SlidedDown:

 $(".p8").click(function(){
    if(!$(".u8").hasClass("slided")){
         $(".u8").addClass("slided").slideDown(300);
         //here code when element slideDown
         return;
    }
    $(".u8").removeClass("slided").slideUp(300);
    //here code when element slideUp
});

prevent event propagation on input click

add this code:

$(".p8 input").on("click",function(){
    return false; //returning false prevent event propagation
});

Working example :: http://jsfiddle.net/Frogmouth/xv0Lk9qf/1/

Answer 2

Fiddle Demo

Try this

$(".p8").click(function(){
    if($(this).hasClass("hide"))
       {
          $(".u8").slideDown(300);
           $(this).removeClass("hide")
       }
    else
    {
         $(".u8").slideUp(300);
        $(this).addClass("hide")
    }

});