How do I implement toggle pills in Rails 3.2 with Twitter Bootstrap?

Question

I took out this snippet to explain my issue.

<ul class="nav nav-pills nav-stacked red"> 
    <li><%= link_to "Home",   'http://localhost:3000/home' %></li>
    <li><%= link_to "About",   'http://localhost:3000/about', :data => {:toggle=>"pill"} %></li>
</ul>

If I click on "Home", the link brings me to 'http://localhost:3000/home'. If I click on about, the pill toggles but the link does not work. This is the resulting html:

<ul class="nav nav-pills nav-stacked red">
    <li><a href="http://localhost:3000/home">Home</a></li>
    <li><a href="http://localhost:3000/about" data-toggle="pill">About</a></li>
</ul>

My goal is to be able to click a link, go to the address and have the corresponding pill highlighted.

I saw the tip about data-toggle="pill" here: http://twitter.github.com/bootstrap/javascript.html#tabs

Thanks for the help!

Answer 1

I think that doesn't work that way... the data-toggle in the example you provided has an anchor link (#about) and yours redirects to another page. You should do that server side or use an anchor link.

Answer 2

Ran into same issue, and did some more experiments. From my results, to use external links you will need to remove "data-toggle" attribute, as following:

<ul class="nav nav-pills nav-stacked red"> 
    <li><%= link_to "Home",   'http://localhost:3000/home' %></li>
    <li><%= link_to "About",   'http://localhost:3000/about' %></li>
</ul>


<ul class="nav nav-pills nav-stacked red">
    <li><a href="http://localhost:3000/home">Home</a></li>
    <li><a href="http://localhost:3000/about">About</a></li>
</ul>

Answer 3

I wound up doing a check if the current page was active

<li class="<%= 'active' if current_page?(root_path) %>">
    <%=link_to root_path do %>
        <i class="icon-white icon-home"></i>
        Home
    <% end %>
</li>