CODEWITHSUNDEEP
jqueryshow-hide
AnzeT
AnzeT

Reputation: 111

jQuery, don't reload - somehow

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?

Upvotes: 1

Views: 570

Answers (3)

ScottE
ScottE

Reputation: 21630

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)

Upvotes: 1

Jim Neath
Jim Neath

Reputation: 1217

<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.

Upvotes: 2

chaos
chaos

Reputation: 124325

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.

Upvotes: 5

Related Questions