2012-04-13 6 views
21

Sto usando plug crollo fornito da bootstrap quali è un jQuery semplice pluginJquery fisarmonica non crollare di default

Tuttavia crollare per impostazione predefinita, come modificare in modo che l'elemento crollo è nascosta per impostazione predefinita, solo quando ho premi l'intestazione, quindi l'elemento collassa e mostra? Grazie

The document of the plugin, just few line so it only takes one minute

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

Questo è il codice 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> 

+0

possibile duplicato di [Come faccio a caricare la mia fisarmonica con tutti i menu chiusi?] (Http://stackoverflow.com/questions/9419470/how-do-i-get-my-accordion-to-load-with -all-the-menus-closed) – davidcondrey

risposta

56

Per Bootstrap 3, alcune cose sono cambiate. Il codice seguente compie la funzionalità desiderata in Bootstrap 3

Se si desidera che il corpo del pannello per mostrare di default:

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

Se si desidera che il corpo del pannello per nascondere di default:

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

Ecco un esempio:

<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> 
+0

E cambia href = "# collapseOne"> a href = "# collapseTwo"> – Huntario

+0

Mi sentivo frustrato fino a quando il tuo post che rendeva chiaro che "in" non significa "INvisibile". – Lucas

+0

Devi avere la classe = "panel panel-default"? Trovo che se rimuovo quello dal div, si arresta la chiusura automatica. Ma non voglio il suo stile. –

1
<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>