CODEWITHSUNDEEP
javascriptruby-on-railstwitter-bootstrap
jgrant
jgrant

Reputation: 592

Using Bootstrap's Collapse with Rails 4

I'm trying to display a list of chapters with some sample text.

Here's what I'm working with: 

      <div class="col-md-3 col-md-4-border">
        <% @book.chapters.each do |chapter| %>
        <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
      <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingOne">
          <h4 class="panel-title">
            <a role="button" data-toggle="collapse" data-parent="#accordion" href="collapseExample" aria-expanded="true" aria-controls="collapseExample">
              <%= chapter.title %>
            </a>
          </h4>
        </div>
        <div id="collapseExample" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
          <div class="panel-body">
            testing
          </div>
        </div>
      </div>
    </div>
      <% end %>
    </div>

The above snippet shows a list of chapters in my view but fails to toggle.

Here is the source for Bootstrap's Collapse function: http://getbootstrap.com/javascript/#collapse

Upvotes: 3

Views: 4653

Answers (4)

jgrant
jgrant

Reputation: 592

Figured this out. I needed to add <%= chapter.id %> to the href and other applicable areas.

Upvotes: 0

Michael Pell
Michael Pell

Reputation: 1476

A General Solution

This is a link to Bootstrap's collapse functionality:

http://getbootstrap.com/javascript/#collapse

I recommend you copy and paste the structure directly from their example and make sure it works locally. Then, slowly add your own dynamic erb behavior step-by-step and make sure you don't screw up the html syntax.

A Specific Solution

Are you just missing the

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

element enclosing the whole thing?

Upvotes: 1

Mike Gorski
Mike Gorski

Reputation: 1228

For each of your chapters you have an extra #before collapse_ in the id attribute. It should be:

<div id="collapse_#{chapter.id}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">

Upvotes: 2

apebeast
apebeast

Reputation: 368

I quickly looked at bootstrap's navbar code here's a quick reference:

<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</div>

You can also easily test out any bootstrap related code using Bootply.

Upvotes: 3

Related Questions