jQuery, don't reload - somehow

Question

I have a small problem with my jQuery script.

<script language="javascript">
            $(document).ready(function(){
                $('.roll-li').click(function(){
                    if ($('.hideshow').is(":hidden")) {
                        $('.hideshow').slideDown("slow");
                    }
                    else {
                        $('.hideshow').slideUp("slow");
                    }
                });
            });
</script>

How to modify script, so div that div with class "hideshow" that I'm slideing up and down, will be hidden on default?

Answer 1

You don't really need to do that in the script. You just put style="display: none" on the div, or add display: none to the CSS for .hideshow.

Answer 2

<script language="javascript">
        $(document).ready(function(){
            $('.hideshow').hide();
            $('.roll-li').click(function(){
                if ($('.hideshow').is(":hidden")) {
                    $('.hideshow').slideDown("slow");
                }
                else {
                    $('.hideshow').slideUp("slow");
                }
            });
        });
</script>

Just add the line:

$('.hideshow').hide();

That's if I understood your question properly.

Answer 3

In css,

.hideshow { display: none; }

In jquery (no need for checking visibility, just use slideToggle()

$(".roll-li").click(function() {
    $(".hideshow").slideToggle("slow");
    return false;
});

(also consider changing your html to use ids instead of classes, as finding these via jquery is more efficient)

Answer 4

Okej, guys, script works perfect. I have used slideToggle insted of slideUp and slideDown. Now I want to add a line, so if menu is shown (slideDown position??) javascript gives a other way, if menu is hidden (slideUp???) I want that this class deletes? Is this achieveable?

Thanks again for your help!