Jquery slideToggle effect not smooth and works wrong

Question

<style>
   .hideblock{
       dispaly:none;
    }
</style>

<span id="btm">click here</span>

<ul>
    <li id="showid" class="hideblock">
        <span>target text</span>
    </li>
</ul>

<script>
    $("#btm").click(function(){
        $("#showid").toggleClass("hideblock");
    });
</script>

the code works. Now I want close and open it with jquery slide.

I try this:

$("#showid").slideToggle().toggleClass("hideblock");

this works but very badly.

First, For open: the slide opens buttom to up (not up to buttom)

Second, for close: the slide animation not works!

Answer 1

You are triggering more than you need to. Trigger slideToggle() only, don't worry about class toggle.

(also you typo'd in the css display line)

Working fiddle: http://jsfiddle.net/q1v15txo/

<style>
   .hideblock{
       display:none;
    }
</style>

<span id="btm">click here</span>

<ul>
    <li id="showid" class="hideblock">
        <span>target text</span>
    </li>
</ul>
<script type="text/javascript">
$(document).ready(function(){
    $("#btm").click(function(){
        $("#showid").slideToggle();
    });
});
</script>