文檔準備就緒時，如何使Jquery可摺疊面板摺疊而不是展開？

Question

我有以下的jQuery代碼插件：

  (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("<div></div>"); 
       } 

       // Wrap the contents of the container within a new div. 
       $(this).children().wrapAll("<div class='collapsibleContainerContent ui-widget-content'></div>"); 

       // Create a new div as the first item within the container. Put the title of the panel in here. 
       $("<div class='collapsibleContainerTitle ui-widget-header'><div>" + $(this).attr("title") + "</div></div>").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(); 
      } 

然後下面是HTML：

<div class="collapsibleContainer" title="Example Collapsible Panel"> 
            <p> 
             KDLorem ipsum dolor sit amet, consectetur adipiscing elit.... (you get the idea!) 
            </p> 
           </div> 

然後這裏是CSS：

.collapsibleContainer 
{ 
} 

.collapsibleContainerTitle 
{ 
    cursor:pointer; 
} 

.collapsibleContainerTitle div 
{ 
    padding-top:5px; 
    padding-left:10px; 
} 

.collapsibleContainerContent 
{ 
    padding: 10px; 
} 

這裏是文件準備好功能：

jQuery(function() { 
    jQuery(".collapsibleContainer").collapsiblePanel(); 
}); 

我需要寫些什麼才能使面板在文檔準備好時摺疊，而不是像文檔加載時那樣展開？

Answer 1

將面板的內容設置爲display:none。

看起來像插件使用slideToggle()，它只是將動畫轉換爲/從display:none轉換。

所以，我覺得這一點：

.collapsibleContainerContent 
{ 
    padding: 10px; 
    display: none; 
}