Rails bootstrap nav tabs active while rendering via yield

Question

I'm stuck on making nav tabs work with keeping track of what's active and how to still render a new view.

Here's an example of my markup. Only included one tab-content for illustrative purposes.

<div class="col-xs-12">
  <ul class="nav nav-tabs">
    <li role="presentation" class="active"><%= link_to "Your Events", '#your-events', data: {toggle: "tab"} %></li>
    <li role="presentation" class=""><%= link_to "Join Events", '#join-events', data: {toggle: "tab"}  %></li>
    <li role="presentation" class=""><%= link_to "Create Event", '#create-event', data: {toggle: "tab"} %></li> 

</div>

<div class="tab-content">
  <div class="tab-pane active" id="your-events">
    <ul class="nav nav-pills">
      <li role="presentation" class="active" id="upcoming"><%= link_to "Upcoming Events", upcoming_events_path %></li>
      <li role="presentation" id="past"><%= link_to "Past Events", past_events_path  %></li>
    </ul>

  <%= yield :section %>

  </div>

So right now I can tab around to expose my tab-content. But when I click on something else. e.g. active in "Upcoming events' and clicking "Past events", how do use both javascript and a link on the same space to shift the active to #past while loading the content from past_events_path

Are you doing a hard refresh when you click the link for `past_events_path` ? If so, you could write a helper method that fills in the class. ie. `class="<%= 'active' if controller.action == 'past' %>" — Chuck Bergeron, Dec 11 '14 at 20:23

score 0 · Accepted Answer · edited May 23 '17 at 12:20

0

Was able to answer with this but a bit hacky cause my tab content is nested

How to get Twitter-Bootstrap navigation to show active link?

edited May 23 '17 at 12:20

Community

1
1

answered Dec 13 '14 at 10:04

Clam

935
1
12
24

Rails bootstrap nav tabs active while rendering via yield

1 Answers1

Linked