CODEWITHSUNDEEP
jquery
Craig Walker
Craig Walker

Reputation: 51727

Making slideToggle() elements collapsed by default in jQuery

I have a set of divs that I want to make collapsible/expandable using jQuery's slideToggle() method. How do I make all of these divs collapsed by default? I'd like to avoid explicitly calling slideToggle() on each element during/after page rendering.

Upvotes: 40

Views: 62260

Answers (4)

netadictos
netadictos

Reputation: 7722

You will have to assign a style: display:none to these layers, so that they are not displayed before javascript rendering. Then you can call slideToggle() without problems. Example:

<style type="text/css">
    .text{display:none}
</style>

<script type="text/javascript">
    $(document).ready(function() {    
        $('span.more').click(function() {
            $('p:eq(0)').slideToggle();
            $(this).hide();
        });
    });
</script>

<body>              
      <p class="text">
          I am using jquery <br/>
          I am using jquery <br/>
          I am using jquery <br/>
          I am using jquery <br/>
          I am using jquery <br/>
          I am using jquery <br/>           
      </p>
      <span class="more">show</span>

Upvotes: 61

BrettWeber
BrettWeber

Reputation: 29

Applying a CSS style behind the scenes will, as stated before, cause complications for users with scripts disabled. A way around this is to declare your element hidden as Anne said, or by defining your CSS in your script as a function to be altered, not as styling for the page (to keep structure, style and function separate) and then using the toggleClass function of the script or the custom effect hide functions defined by jQuery.

Upvotes: 2

Dave Ward
Dave Ward

Reputation: 60580

You can start your elements with style="display: none;" and slideToggle() will take it from there.

Upvotes: 14

Anne Porosoff
Anne Porosoff

Reputation: 1941

you probably can do something like this:

$(document).ready(function(){
  $('div').hide();
});

Upvotes: 13

Related Questions