Rails with Bootstrap Tabs

Question

I have a rails 4 app.

I am trying to incorporate Bootstrap Tabs.

Reading the bootstrap docs, it says one way of doing this does not involve any js. I have tried each of the approaches in the docs but can't get any of them working in my app.

My current attempt is:

<ul class="nav nav-tabs nav-justified">
                    <li role="presentation" class="active"> <a href="#terms" aria-controls="terms" role="tab" data-toggle="tab">Terms</a></li>
                    <li role="presentation"> <a href="#privacy" aria-controls="privacy" role="tab" data-toggle="tab">Privacy</a></li>
                    <li role="presentation"> <a href="#licence" aria-controls="licence" role="tab" data-toggle="tab">Licence</a></li>
                    <li role="presentation"> <a href="#trust" aria-controls="trust" role="tab" data-toggle="tab">Trust</a></li>
                    <li role="presentation"> <a href="#reliance" aria-controls="reliance" role="tab" data-toggle="tab">Reliance</a></li>
                    <li role="presentation"> <a href="#pricing" aria-controls="pricing" role="tab" data-toggle="tab">Pricing</a></li>

                </ul>

<div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="terms"><%= render 'pages/legalpolicies/terms' %></div>
                <div role="tabpanel" class="tab-pane" id="privacy"><%= render 'pages/legalpolicies/privacy' %></div>

                <div role="tabpanel" class="tab-pane" id="licence"><%= render 'pages/legalpolicies/licence' %></div>
                <div role="tabpanel" class="tab-pane" id="trust"><%= render 'pages/legalpolicies/trust' %></div>

                <div role="tabpanel" class="tab-pane" id="reliance"><%= render 'pages/legalpolicies/reliance' %></div>
                <div role="tabpanel" class="tab-pane" id="pricing"><%= render 'pages/legalpolicies/pricing' %></div>

            </div>

The effect is to give me a tab bar across the top of the page. The tabs are clickable.

However all of the content in each of the separate tab content panes just displays in one big long page of text. The links don't work.

Can anyone see what's required to get this to work?

I read this statement in the docs:

You can activate a tab or pill navigation without writing any JavaScript by simply specifying data-toggle="tab" or data-toggle="pill" on an element.

I understand this to mean that no js is required.

Anyway, I tried making a privacy.js file in my javascripts folder and adding:

$('#myTabs a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})

That didn't do anything.

I tried moving it to my application.js file. No difference. Is more js required? It's odd to me that this does anything since I don't have anything called #myTabs in the html. Is there something else that's required to get this to work?

Gem file has:

gem 'sass-rails', '~> 5.0'
gem 'bootstrap-sass', '~> 3.3.5'

Style sheets has a file called: framework_and_overrides.css.css, which has:

@import "bootstrap-sprockets";
@import "bootstrap";
@import "font-awesome-sprockets";
@import "font-awesome";

Javascripts folder has a file called application.js, which has:

//= require underscore
//= require gmaps/google
//= require jquery
//= require bootstrap-sprockets
//= require jquery_ujs
//= require_tree .

So - following advice on the bootstrap-sass gem setup (for Ruby on Rails, I made changes to my stylesheets and js files.

Specifically, that gem says:

Then, remove all the *= require_self and *= require_tree . statements from the sass file. Instead, use @import to import Sass files.

Do not use *= require in Sass or your other stylesheets will not be able to access the Bootstrap mixins or variables.

I changed the name of the application style sheet from application.css.scss to application.scss.

I changed the content of that file to:

 @import "framework_and_overrides.css.scss";
 @import "require_self";
 @import "require_tree .";
 */

I changed the content of my framework_and_overrides.css.scss file to include:

@import "bootstrap-sprockets";
@import "bootstrap";
@import "font-awesome-sprockets";
@import "font-awesome";
@import "bootstrap-slider";

My application.js file has:

//= require underscore
//= require gmaps/google
//= require jquery
//= require bootstrap-sprockets
//= require bootstrap-slider
//= require jquery_ujs
//= require_tree .

This doesn't have a positive impact. It removes all the styling on my pages, removes all the bootstrap styling and generally messes everything up. It doesn't connect the tab links to the tab content.

I'm stuck -really trying to understand how to use Bootstrap Tabs in Rails 4. Any advice would be very much appreciated.

When I change it back, at least the styling is reflected, but the js tabs do not work (in either case).

ANOTHER ATTEMPT:

When I add import bootstrap to the top of my application.js:

@import "bootstrap";
//= require underscore
//= require gmaps/google
//= require jquery
//= require bootstrap
//= require bootstrap-sprockets
//= require bootstrap-slider
//= require jquery_ujs
//= require_tree .

The tabs across the top of the page in this example work so that the page is jumped down to where the start of the relevant text tab is. That's not what I want. I want the partial containing that text to display at the top of the page (and the text in each of the other partials to be hidden) - as is shown in the bootstrap example for tabs.

Answer 1

Here's one way with extra styling to make the tabs look like what you would like.

For the rails links to work you will need to modify the javascript that shows hides content to either use turbolinks or similar.

        $(document).ready(function() {
            $(".tabs-menu a").click(function(event) {
                event.preventDefault();
                $(this).parent().addClass("current");
                $(this).parent().siblings().removeClass("current");
                var tab = $(this).attr("href");
                $(".tab-content").not(tab).css("display", "none");
                $(tab).fadeIn();
            });
        });

        body {
        padding: 20px;
        font-family: Arial, Helvetica, sans-serif;
        line-height: 1.5;
        font-size: 14px;
        }
        .tabs-menu {
        height: 30px;
        float: left;
        clear: both;
        }
        .tabs-menu li {
        height: 30px;
        line-height: 30px;
        float: left;
        margin-right: 10px;
        background-color: #ccc;
        border-top: 1px solid #d4d4d1;
        border-right: 1px solid #d4d4d1;
        border-left: 1px solid #d4d4d1;
        }
        .tabs-menu li.current {
        position: relative;
        background-color: #fff;
        border-bottom: 1px solid #fff;
        z-index: 5;
        }
        .tabs-menu li a {
        padding: 10px;
        text-transform: uppercase;
        color: #fff;
        text-decoration: none;
        }
        .tabs-menu .current a {
        color: #2e7da3;
        }
        .tab {
        border: 1px solid #d4d4d1;
        background-color: #fff;
        float: left;
        margin-bottom: 20px;
        width: auto;
        }
        .tab-content {
        width: 660px;
        padding: 20px;
        display: none;
        }
        #tab-1 {
        display: block;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="tabs-container">
            <ul class="tabs-menu">
                <li class="current"><a href="#tab-1">Tab 1</a></li>
                <li><a href="#tab-2">Tab 2</a></li>
                <li><a href="#tab-3">Tab 3</a></li>
                <li><a href="#tab-4">Tab 4</a></li>
            </ul>
            <div class="tab">
                <div id="tab-1" class="tab-content">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet purus urna. Proin dictum fringilla enim, sit amet suscipit dolor dictum in. Maecenas porttitor, est et malesuada congue, ligula elit fermentum massa, sit amet porta odio est at velit. Sed nec turpis neque. Fusce at mi felis, sed interdum tortor. Nullam pretium, est at congue mattis, nibh eros pharetra lectus, nec posuere libero dui consectetur arcu. Quisque convallis facilisis fermentum. Nam tincidunt, diam nec dictum mattis, nunc dolor ultrices ipsum, in mattis justo turpis nec ligula. Curabitur a ante mauris. Integer placerat imperdiet diam, facilisis pretium elit mollis pretium. Sed lobortis, eros non egestas suscipit, dui dui euismod enim, ac ultricies arcu risus at tellus. Donec imperdiet congue ligula, quis vulputate mauris ultrices non. Aliquam rhoncus, arcu a bibendum congue, augue risus tincidunt massa, vel vehicula diam dolor eget felis.</p>
                </div>
                <div id="tab-2" class="tab-content">
                    <p>Donec semper dictum sem, quis pretium sem malesuada non. Proin venenatis orci vel nisl porta sollicitudin. Pellentesque sit amet massa et orci malesuada facilisis vel vel lectus. Etiam tristique volutpat auctor. Morbi nec massa eget sem ultricies fermentum id ut ligula. Praesent aliquet adipiscing dictum. Suspendisse dignissim dui tortor. Integer faucibus interdum justo, mattis commodo elit tempor id. Quisque ut orci orci, sit amet mattis nulla. Suspendisse quam diam, feugiat at ullamcorper eget, sagittis sed eros. Proin tortor tellus, pulvinar at imperdiet in, egestas sed nisl. Aenean tempor neque ut felis dignissim ac congue felis viverra. </p>
                </div>
                <div id="tab-3" class="tab-content">
                    <p>Duis egestas fermentum ipsum et commodo. Proin bibendum consectetur elit, hendrerit porta mi dictum eu. Vestibulum adipiscing euismod laoreet. Vivamus lobortis tortor a odio consectetur pulvinar. Proin blandit ornare eros dictum fermentum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur laoreet, ante aliquet molestie laoreet, lectus odio fringilla purus, id porttitor erat velit vitae mi. Nullam posuere nunc ut justo sollicitudin interdum. Donec suscipit eros nec leo condimentum fermentum. Nunc quis libero massa. Integer tempus laoreet lectus id interdum. Integer facilisis egestas dui at convallis. Praesent elementum nisl et erat iaculis a blandit ligula mollis. Vestibulum vitae risus dui, nec sagittis arcu. Nullam tortor enim, placerat quis eleifend in, viverra ac lacus. Ut aliquam sapien ut metus hendrerit auctor dapibus justo porta. </p>
                </div>
                <div id="tab-4" class="tab-content">
                    <p>Proin sollicitudin tincidunt quam, in egestas dui tincidunt non. Maecenas tempus condimentum mi, sed convallis tortor iaculis eu. Cras dui dui, tempor quis tempor vitae, ullamcorper in justo. Integer et lorem diam. Quisque consequat lectus eget urna molestie pharetra. Cras risus lectus, lobortis sit amet imperdiet sit amet, eleifend a erat. Suspendisse vel luctus lectus. Sed ac arcu nisi, sit amet ornare tellus. Pellentesque nec augue a nibh pharetra scelerisque quis sit amet felis. Nullam at enim at lacus pretium iaculis sit amet vel nunc. Praesent sapien felis, tincidunt vitae blandit ut, mattis at diam. Suspendisse ac sapien eget eros venenatis tempor quis id odio. Donec lacus leo, tincidunt eget molestie at, pharetra cursus odio. </p>
                </div>
            </div>
        </div>

Answer 2

I read the following in Bootstrap DOC:

Using navs for tab panels requires JavaScript tabs plugin For tabs with tabbable areas, you must use the tabs JavaScript plugin. The markup will also require additional role and ARIA attributes – see the plugin's example markup for further details.

So you probably need to add to application.js:

//= require bootstrap

Including:

   //= require bootstrap-sprockets

Is not enough:

bootstrap-sprockets provides individual Bootstrap Javascript files (alert.js or dropdown.js, for example), while bootstrap provides a concatenated file containing all Bootstrap Javascripts