javascript - Using Bootstrap's Collapse with Rails 4 - Stack Overflow

I'm trying to display a list of chapters with some sample text. Here's what I'm working

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:

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./javascript/#collapse

Share Improve this question edited Jan 14, 2016 at 23:24 jgrant asked Jan 14, 2016 at 0:21 jgrantjgrant 5926 silver badges20 bronze badges 0
Add a ment  | 

4 Answers 4

Reset to default 3

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.

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

A General Solution

This is a link to Bootstrap's collapse functionality:

http://getbootstrap./javascript/#collapse

I remend 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?

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

发布者:admin,转转请注明出处:http://www.yc00.com/questions/1744247902a4565027.html

相关推荐

发表回复

评论列表(0条)

  • 暂无评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信