title: How Do Make a Jquery Collapsible Panel Collapsed instead of Expanded when the Document is Ready?
body: <p>I have following jquery code plugin:  </p>
  
  <pre><code>           (function ($) {
                  $.fn.extend({
                      collapsiblePanel: function () {
                          // Call the ConfigureCollapsiblePanel function for the selected element
                          return $(this).each(ConfigureCollapsiblePanel);
                      }
                  });
              })(jQuery);
  
              function ConfigureCollapsiblePanel() {
                  $(this).addClass("ui-widget");
  
                  // Check if there are any child elements, if not then wrap the inner text within a new div.
                  if ($(this).children().length == 0) {
                      $(this).wrapInner("&lt;div&gt;&lt;/div&gt;");
                  }
  
                  // Wrap the contents of the container within a new div.
                  $(this).children().wrapAll("&lt;div class='collapsibleContainerContent ui-widget-content'&gt;&lt;/div&gt;");
  
                  // Create a new div as the first item within the container.  Put the title of the panel in here.
                  $("&lt;div class='collapsibleContainerTitle ui-widget-header'&gt;&lt;div&gt;" + $(this).attr("title") + "&lt;/div&gt;&lt;/div&gt;").prependTo($(this));
  
  
                  // Assign a call to CollapsibleContainerTitleOnClick for the click event of the new title div.
                  $(".collapsibleContainerTitle", this).click(CollapsibleContainerTitleOnClick);
              }
  
  
              function CollapsibleContainerTitleOnClick() {
                  // The item clicked is the title div... get this parent (the overall container) 
                  // and toggle the content within it.
                  $(".collapsibleContainerContent", $(this).parent()).slideToggle();
              }
  </code></pre>
  
  <p>Then here is the html: </p>
  
  <pre><code>&lt;div class="collapsibleContainer" title="Example Collapsible Panel"&gt;
                                      &lt;p&gt;
                                          KDLorem ipsum dolor sit amet, consectetur adipiscing elit.... (you get the idea!)
                                      &lt;/p&gt;
                                  &lt;/div&gt;  
  </code></pre>
  
  <p>Then here is the css: </p>
  
  <pre><code>.collapsibleContainer
  {
  }
  
  .collapsibleContainerTitle
  {
     cursor:pointer;
  }
  
  .collapsibleContainerTitle div
  {
    padding-top:5px;
    padding-left:10px;
  }
  
  .collapsibleContainerContent
  {
     padding: 10px;
  }
  </code></pre>
  
  <p>Here is the document ready function:  </p>
  
  <pre><code>jQuery(function () {
     jQuery(".collapsibleContainer").collapsiblePanel();
  });
  </code></pre>
  
  <p>What do I need to write to make the Panel actually collapse on document ready instead of expand as it is now doing when the document is loaded?</p>