Collapsible Div Open On Default

[ello]

The code below simply shows and hides a div (content) when you click on the heading (heading).

<script type="text/javascript">
jQuery(document).ready(function() {
  jQuery(".content").hide();
  //toggle the componenet with class msg_body
  jQuery(".heading").click(function()
  {
        jQuery(this).next(".content").slideToggle(0);
  });
});
</script>

Demo - http://www.designgala.com/demos/collapse-expand-jquery.html

By default, the content is always hidden - Is there any way to have the content showing by default? I'm using a number of these on a page, some will need to be showing by default, others will have to be hidden. Just wondering how to maybe add a bit to the code to make both possible?

[pritaeas]

Is there any way to have the content showing by default?

Remove line 3. It hides all content.

[ello]

Cheers - The problem is I'm wanting some to be hidden, and others to be open on default - that's why I'm unsure how to go about doing it.

Removing line three would simply make all the content visible by default, yes, but is there a way to add a bit of code so some would be open, and some closed?

I guess using another bit of js such as

    <script type="text/javascript">
    jQuery(document).ready(function() {
    //toggle the componenet with class msg_body
    jQuery(".heading-open").click(function()
    {
    jQuery(this).next(".content-open").slideToggle(0);
    });
    });
    </script>

Will maybe work, but just wondering if there's a way to get it all into one function.

[pritaeas]

Give the ones you want closed an additional class (closed for example). Then instead of the line you removed:

jQuery(".closed").hide();

[ello]

Apprciate the help pritaeas. All working (: