javascript - twitter bootstrap collapse first item & open second item on load - Stack Overflow

admin管理员组

文章数量:1320588

I'm using twitter boostrap for the first time & am using the collapsible accordion.

When the page loads the first item is open by default & the remaining items are all collapsed.

I would like the second item to be open & the first item & remaining items to be collapsed by default when the page loads.

Is there a simple way to achieve this? I've tried playing around with the data-toggle attribute but am not getting anywhere.

<div class="accordion" id="accordion2">
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
        Name &amp; Location
      </a>
    </div>
    <div id="collapseOne" class="accordion-body collapse in">
      <div class="accordion-inner">
        <%= f.input :name %> <br/>

        <%= f.input :addr_1, label: 'Address' %> <br/>

        <%= f.input :addr_2, label: false %> <br/>

        <%= f.input :addr_3, label: false, placeholder: "County, State, Provence, Region etc" %> <br/>

        <%= f.input :country, label: false, :priority => [ "Ireland", "United Kingdom" ] %>  <br/>

        </div>
    </div>
  </div>

    <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
        Description
      </a>
    </div>
    <div id="collapseTwo" class="accordion-body collapse">
      <div class="accordion-inner">

        <%= f.input :description, :input_html => { :cols => 10, :rows => 3 } %> <br/>

        <%= f.input :looped, :as => :boolean %> 

        <%= f.input :duration_hours, :label => 'Duration',  :collection => 0..12, :include_blank => false, :hint => "hours" %>

        <%= f.input :duration_mins, collection: [ 0, 15, 30, 45 ], :include_blank => false, label: false, :hint => "mins" %>
      </div>
    </div>
  </div>


  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
        Images
      </a>
    </div>
    <div id="collapseThree" class="accordion-body collapse">
      <div class="accordion-inner">
        <%= f.simple_fields_for :photos do |builder| %>
          <%= render 'photo_fields', f: builder %>
        <% end %>
        <div style=clear:both;> </div>
        <%= link_to_add_fields "Add More", f, :photos %>
      </div>
    </div>
  </div>

  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseFour">
        Route
      </a>
    </div>
    <div id="collapseFour" class="accordion-body collapse">
      <div class="accordion-inner">
        <%= f.simple_fields_for :routes do |builder| %>
          <%= render 'route_fields', f: builder %>
        <% end %>
        <%= link_to_add_fields "Add Step", f, :routes %>
      </div>
    </div>
  </div>

  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseFive">
        Directions
      </a>
    </div>
    <div id="collapseFive" class="accordion-body collapse">
      <div class="accordion-inner">
        <%= f.simple_fields_for :directions do |builder| %>
          <%= render 'direction_fields', f: builder %>
        <% end %>
        <%= link_to_add_fields "Add More Directions", f, :directions %>
      </div>
    </div>
  </div>

</div>

I'm using twitter boostrap for the first time & am using the collapsible accordion.

When the page loads the first item is open by default & the remaining items are all collapsed.

I would like the second item to be open & the first item & remaining items to be collapsed by default when the page loads.

Is there a simple way to achieve this? I've tried playing around with the data-toggle attribute but am not getting anywhere.

<div class="accordion" id="accordion2">
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
        Name &amp; Location
      </a>
    </div>
    <div id="collapseOne" class="accordion-body collapse in">
      <div class="accordion-inner">
        <%= f.input :name %> <br/>

        <%= f.input :addr_1, label: 'Address' %> <br/>

        <%= f.input :addr_2, label: false %> <br/>

        <%= f.input :addr_3, label: false, placeholder: "County, State, Provence, Region etc" %> <br/>

        <%= f.input :country, label: false, :priority => [ "Ireland", "United Kingdom" ] %>  <br/>

        </div>
    </div>
  </div>

    <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
        Description
      </a>
    </div>
    <div id="collapseTwo" class="accordion-body collapse">
      <div class="accordion-inner">

        <%= f.input :description, :input_html => { :cols => 10, :rows => 3 } %> <br/>

        <%= f.input :looped, :as => :boolean %> 

        <%= f.input :duration_hours, :label => 'Duration',  :collection => 0..12, :include_blank => false, :hint => "hours" %>

        <%= f.input :duration_mins, collection: [ 0, 15, 30, 45 ], :include_blank => false, label: false, :hint => "mins" %>
      </div>
    </div>
  </div>


  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
        Images
      </a>
    </div>
    <div id="collapseThree" class="accordion-body collapse">
      <div class="accordion-inner">
        <%= f.simple_fields_for :photos do |builder| %>
          <%= render 'photo_fields', f: builder %>
        <% end %>
        <div style=clear:both;> </div>
        <%= link_to_add_fields "Add More", f, :photos %>
      </div>
    </div>
  </div>

  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseFour">
        Route
      </a>
    </div>
    <div id="collapseFour" class="accordion-body collapse">
      <div class="accordion-inner">
        <%= f.simple_fields_for :routes do |builder| %>
          <%= render 'route_fields', f: builder %>
        <% end %>
        <%= link_to_add_fields "Add Step", f, :routes %>
      </div>
    </div>
  </div>

  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseFive">
        Directions
      </a>
    </div>
    <div id="collapseFive" class="accordion-body collapse">
      <div class="accordion-inner">
        <%= f.simple_fields_for :directions do |builder| %>
          <%= render 'direction_fields', f: builder %>
        <% end %>
        <%= link_to_add_fields "Add More Directions", f, :directions %>
      </div>
    </div>
  </div>

</div>

• javascript
• twitter-bootstrap

Share Improve this question Follow asked Apr 2, 2013 at 18:12 HollyHolly 7,7522525 gold badges9292 silver badges146146 bronze badges 1

• 1 If I recall, the "in" class is what determines which one opens by default? – helion3 Commented Apr 2, 2013 at 18:14

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

Bootstrap uses the in class to determine which items open by default (not just on the accordian feature) so you can move that class to the #collapseTwo div and it will open by default.

本文标签： javascripttwitter bootstrap collapse first item amp open second item on loadStack Overflow