javascript - div - El acordeón Jquery no se colapsa por defecto

jquery collapse()

Question

Estoy usando el plugin de colapso proporcionado por bootstrap que es un plugin jquery simple

Sin embargo, colapsar de forma predeterminada, cómo modificar para que el elemento de colapso esté oculto de forma predeterminada, solo cuando presiono el encabezado, entonces el elemento se contrae y se muestra? Gracias

El documento del plugin, solo algunas líneas, así que solo toma un minuto

$(document).ready( function () {
$(".collapse").collapse()({
  toggle: false,
  show: false
  });
} );

Este es el html:

<div class="accordion-group">
            <div class="alert alert-info" data-toggle="collapse" href="#collapse1" style="margin-bottom:0px;">                     
              Collapsible #1
                  </div>   
          <div id="collapse1" class="accordion-body collapse" style="background-color:#ffffff;">
               content1
           </div>
                           <div class="alert alert-info" data-toggle="collapse" href="#collapse2" style="margin-bottom:0px;">                     
              Collapsible #2
                  </div>   
          <div id="collapse2" class="accordion-body collapse" style="background-color:#ffffff;">
               content2
           </div>

Answer 1

Para Bootstrap 3, algunas cosas han cambiado. El siguiente código logra la funcionalidad deseada en Bootstrap 3

Si desea que el cuerpo del panel se muestre por defecto:

<div id="collapseOne" class="panel-collapse collapse in">

Si desea que el cuerpo del panel se oculte por defecto:

<div id="collapseOne" class="panel-collapse collapse">

Aquí hay un ejemplo:

<div class="bs-example">
    <div class="panel-group" id="accordion">

          <!- Repeat For Next Panel------->
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                       xxxxxxxxxxxHERE IS THE HEADER CONTENTSxxxxxxxxxxxx
                    </a>
                </h4>
           </div>
               <div id="collapseOne" class="panel-collapse collapse in">
                   <div class="panel-body">
                       xxxxxxxxxxxHERE IS THE BODY CONTENTSxxxxxxxxxxxx
                   </div>
               </div> 
         </div>
            <!- Repeat For Next Panel---(but change <div id="collapseTwo")--->

     </div>
 </div>

Answer 2

<div class="accordion-group collapse">
   <div class="alert alert-info" data-toggle="collapse" href="#collapse1" style="margin-bottom:0px;">                     
          Collapsible #1
   </div>   
   <div id="collapse1" class="accordion-body collapse" style="background-color:#ffffff;">
           content1
   </div>
   <div class="alert alert-info" data-toggle="collapse" href="#collapse2" style="margin-bottom:0px;">                     
          Collapsible #2
    </div>   
    <div id="collapse2" class="accordion-body collapse" style="background-color:#ffffff;">
          content2
    </div>
</div>