trouble with bootstrap tabbable tabs in rails app

Question

I'm having a problem with this page (it's not even working): http://www.collegeanswerz.com/colleges

I'm trying to use bootstrap to add tabbable tabs to my site (to let users sort colleges by alphabetical, rank, and size).

I went here (http://twitter.github.io/bootstrap/customize.html) and downloaded Navs, tabs, and pills for css, and Togglable tabs for jquery. I included both corresponding files in 'vendor/assets'. I'm trying to follow this (http://twitter.github.io/bootstrap/javascript.html#tabs) but it's not making any sense to me. My code is below. What am I doing wrong?

colleges.html.erb

<%= stylesheet_link_tag    "colleges", :media => "all" %>
<%= javascript_include_tag :colleges %>
<% provide(:title, 'Colleges') %>

<h1>Colleges</h1>

<div class="tabbable"> <!-- Only required for left/right tabs -->
  <ul class="nav nav-tabs" id="myTabs">
    <li class="active"><a href="#alphabetical" data-toggle="tab">Alphabetical</a></li>
    <li><a href="#rank" data-toggle="tab">Rank</a></li>
    <li><a href="#size" data-toggle="tab">Size</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="alphabetical">
        <h3>National Universities</h3>
        <nav class="list">
            <ul>
                <li class="top_li"><%= link_to "American University", "/american-university" %></li>
                <li><%= link_to "Auburn", "/auburn" %></li>
                <li><%= link_to "Baylor", "/baylor" %></li>
                <li><%= link_to "Binghamton", "/binghamton" %></li>
                <li><%= link_to "Boston College", "/boston-college" %></li>
                <li><%= link_to "Boston University", "/boston-university" %></li>
                <li><%= link_to "Brandeis", "/brandeis" %></li>
                <li><%= link_to "Brown", "/brown" %></li>
                <li><%= link_to "BYU", "/byu" %></li>
                <li><%= link_to "Cal Tech", "/cal-tech" %></li>
                <li><%= link_to "Carnegie Mellon", "/carnegie-mellon" %></li>
                <li><%= link_to "Case Western", "/case-western" %></li>
                <li><%= link_to "Clark University", "/clark-university" %></li>
                <li><%= link_to "Clemson", "/clemson" %></li>
                <li><%= link_to "College of William and Mary", "/college-of-william-and-mary" %></li>
                <li><%= link_to "Colorado School of Mines", "/colorado-school-of-mines" %></li>
                <li><%= link_to "Columbia", "/columbia" %></li>
                <li><%= link_to "Cornell", "/cornell" %></li>
                <li><%= link_to "Dartmouth", "/dartmouth" %></li>
                <li><%= link_to "Drexel", "/drexel" %></li>
                <li><%= link_to "Duke", "/duke" %></li>
                <li><%= link_to "Emory", "/emory" %></li>
                <li><%= link_to "Florida State University", "/florida-state-university" %></li>
                <li><%= link_to "Fordham", "/fordham" %></li>
                <li><%= link_to "Georgetown", "/georgetown" %></li>
                <li><%= link_to "Georgia Tech", "/georgia-tech" %></li>
                <li><%= link_to "George Washington University", "/george-washington-university" %></li>
                <li><%= link_to "Harvard", "/harvard" %></li>
                <li><%= link_to "Indiana University", "/indiana-university" %></li>
                <li><%= link_to "Johns Hopkins", "/johns-hopkins" %></li>
                <li><%= link_to "Lehigh", "/lehigh" %></li>
                <li><%= link_to "Marquette", "/marquette" %></li>
                <li><%= link_to "Miami of Ohio", "/miami-of-ohio" %></li>
                <li><%= link_to "Michigan State", "/michigan-state" %></li>
                <li><%= link_to "MIT", "/mit" %></li>
                <li><%= link_to "Northeastern", "/northeastern" %></li>
                <li><%= link_to "Northwestern", "/northwestern" %></li>
                <li><%= link_to "Notre Dame", "/notre-dame" %></li>
                <li><%= link_to "NYU", "/nyu" %></li>
                <li><%= link_to "Ohio State", "/ohio-state" %></li>
                <li><%= link_to "Penn State", "/penn-state" %></li>
                <li><%= link_to "Pepperdine", "/pepperdine" %></li>
                <li><%= link_to "Princeton", "/princeton" %></li>
                <li><%= link_to "Purdue", "/purdue" %></li>
                <li><%= link_to "Rice", "/rice" %></li>
                <li><%= link_to "RPI", "/rpi" %></li>
                <li><%= link_to "Rutgers", "/rutgers" %></li>
                <li><%= link_to "SMU", "/smu" %></li>
                <li><%= link_to "Stanford", "/stanford" %></li>
                <li><%= link_to "Stevens Tech", "/stevens-tech" %></li>
                <li><%= link_to "St. Louis University", "/st-louis-university" %></li>
                <li><%= link_to "Stony Brook", "/stony-brook" %></li>
                <li><%= link_to "SUNY - ESF", "/suny-esf" %></li>
                <li><%= link_to "Syracuse", "/syracuse" %></li>
                <li><%= link_to "Texas A&M", "/texas-am" %></li>
                <li><%= link_to "TCU", "/tcu" %></li>
                <li><%= link_to "Tufts", "/tufts" %></li>
                <li><%= link_to "Tulane", "/tulane" %></li>
                <li><%= link_to "UC Berkeley", "/uc-berkeley" %></li>
                <li><%= link_to "UC Davis", "/uc-davis" %></li>
                <li><%= link_to "UC Irvine", "/uc-irvine" %></li>
                <li><%= link_to "UCLA", "/ucla" %></li>
                <li><%= link_to "UC San Diego", "/uc-san-diego" %></li>
                <li><%= link_to "UC Santa Barbara", "/uc-santa-barbara" %></li>
                <li><%= link_to "UC Santa Cruz", "/uc-santa-cruz" %></li>
                <li><%= link_to "University of Alabama", "/university-of-alabama" %></li>
                <li><%= link_to "University of Colorado", "/university-of-colorado" %></li>
                <li><%= link_to "University of Connecticut", "/university-of-connecticut" %></li>
                <li><%= link_to "University of Chicago", "/university-of-chicago" %></li>
                <li><%= link_to "University of Delaware", "/university-of-delaware" %></li>
                <li><%= link_to "University of Denver", "/university-of-denver" %></li>
                <li><%= link_to "University of Florida", "/university-of-florida" %></li>
                <li><%= link_to "University of Georgia", "/university-of-georgia" %></li>
                <li><%= link_to "University of Illinois", "/university-of-illinois" %></li>
                <li><%= link_to "University of Iowa", "/university-of-iowa" %></li>
                <li><%= link_to "University of Maryland", "/university-of-maryland" %></li>
                <li><%= link_to "University of Massachusetts", "/university-of-massachusetts" %></li>
                <li><%= link_to "University of Miami", "/university-of-miami" %></li>
                <li><%= link_to "University of Michigan", "/university-of-michigan" %></li>
                <li><%= link_to "University of Minnesota", "/university-of-minnesota" %></li>
                <li><%= link_to "University of Missouri", "/university-of-missouri" %></li>
                <li><%= link_to "University of North Carolina", "/university-of-north-carolina" %></li>
                <li><%= link_to "University of Pennsylvania", "/university-of-pennsylvania" %></li>
                <li><%= link_to "University of Pittsburgh", "/university-of-pittsburgh" %></li>
                <li><%= link_to "University of Rochester", "/university-of-rochester" %></li>
                <li><%= link_to "University of San Diego", "/university-of-san-diego" %></li>
                <li><%= link_to "University of Texas", "/university-of-texas" %></li>
                <li><%= link_to "University of Tulsa", "/university-of-tulsa" %></li>
                <li><%= link_to "University of Vermont", "/university-of-vermont" %></li>
                <li><%= link_to "University of Virginia", "/university-of-virginia" %></li>
                <li><%= link_to "University of Washington", "/university-of-washington" %></li>
                <li><%= link_to "University of Wisconsin", "/university-of-wisconsin" %></li>
                <li><%= link_to "USC", "/usc" %></li>
                <li><%= link_to "Vanderbilt", "/vanderbilt" %></li>
                <li><%= link_to "Virginia Tech", "/virginia-tech" %></li>
                <li><%= link_to "Wake Forest", "/wake-forest" %></li>
                <li><%= link_to "Washington University in St. Louis", "/washington-university-in-st-louis" %></li>
                <li><%= link_to "Worcester Tech", "/worcester-tech" %></li>
                <li><%= link_to "Yale", "/yale" %></li>
                <li><%= link_to "Yeshiva", "/yeshiva" %></li>
            </ul>
        </nav>

        <h3>Liberal Arts Colleges</h3>
        <nav class="list">
            <ul>
                <li class="top_li"><%= link_to "Agnes Scott", "/agnes-scott" %></li>
                <li><%= link_to "Allegheny", "/allegheny" %></li>
                <li><%= link_to "Amherst", "/amherst" %></li>
                <li><%= link_to "Augustana", "/augustana" %></li>
                <li><%= link_to "Austin", "/austin" %></li>
                <li><%= link_to "Bard", "/bard" %></li>
                <li><%= link_to "Barnard", "/barnard" %></li>
                <li><%= link_to "Bates", "/bates" %></li>
                <li><%= link_to "Beloit", "/beloit" %></li>
                <li><%= link_to "Bennington College", "/bennington-college" %></li>
                <li><%= link_to "Berea", "/berea" %></li>
                <li><%= link_to "Bowdoin", "/bowdoin" %></li>
                <li><%= link_to "Bucknell", "/bucknell" %></li>
                <li><%= link_to "Bryn Mawr", "/bryn-mawr" %></li>
                <li><%= link_to "Carleton", "/carleton" %></li>
                <li><%= link_to "Centre", "/centre" %></li>
                <li><%= link_to "Claremont McKenna", "/claremont-mckenna" %></li>
                <li><%= link_to "Colby", "/colby" %></li>
                <li><%= link_to "Colgate", "/colgate" %></li>
                <li><%= link_to "College of St. Benedict", "/college-of-st-benedict" %></li>
                <li><%= link_to "College of the Atlantic", "/college-of-the-atlantic" %></li>
                <li><%= link_to "College of the Holy Cross", "/college-of-the-holy-cross" %></li>
                <li><%= link_to "College of Wooster", "/college-of-wooster" %></li>
                <li><%= link_to "Colorado College", "/colorado-college" %></li>
                <li><%= link_to "Connecticut College", "/connecticut-college" %></li>
                <li><%= link_to "Cornell College", "/cornell-college" %></li>
                <li><%= link_to "Davidson", "/davidson" %></li>
                <li><%= link_to "Denison", "/denison" %></li>
                <li><%= link_to "DePauw", "/depauw" %></li>
                <li><%= link_to "Dickinson", "/dickinson" %></li>
                <li><%= link_to "Earlham", "/earlham" %></li>
                <li><%= link_to "Franklin and Marshall", "/franklin-and-marshall" %></li>
                <li><%= link_to "Furman", "/furman" %></li>
                <li><%= link_to "Gettysburg", "/gettysburg" %></li>
                <li><%= link_to "Grinnell", "/grinnell" %></li>
                <li><%= link_to "Gustavus Adolphus", "/gustavus-adolphus" %></li>
                <li><%= link_to "Hamilton", "/hamilton" %></li>
                <li><%= link_to "Harvey Mudd", "/harvey-mudd" %></li>
                <li><%= link_to "Haverford", "/haverford" %></li>
                <li><%= link_to "Hendrix", "/hendrix" %></li>
                <li><%= link_to "Hillsdale College", "/hillsdale-college" %></li>
                <li><%= link_to "Hobart and William Smith Colleges", "/hobart-and-william-smith-colleges" %></li>
                <li><%= link_to "Illinois Wesleyan", "/illinois-wesleyan" %></li>
                <li><%= link_to "Kalamazoo", "/kalamazoo" %></li>
                <li><%= link_to "Kenyon", "/kenyon" %></li>
                <li><%= link_to "Knox", "/knox" %></li>
                <li><%= link_to "Lafayette", "/lafayette" %></li>
                <li><%= link_to "Lawrence", "/lawrence" %></li>
                <li><%= link_to "Lewis and Clark", "/lewis-and-clark" %></li>
                <li><%= link_to "Macalester", "/macalester" %></li>
                <li><%= link_to "Middlebury", "/middlebury" %></li>
                <li><%= link_to "Millsaps", "/millsaps" %></li>
                <li><%= link_to "Mount Holyoke College", "/mount-holyoke-college" %></li>
                <li><%= link_to "Muhlenberg", "/muhlenberg" %></li>
                <li><%= link_to "New College of Florida", "/new-college-of-florida" %></li>
                <li><%= link_to "Oberlin", "/oberlin" %></li>
                <li><%= link_to "Occidental", "/occidental" %></li>
                <li><%= link_to "Pitzer", "/pitzer" %></li>
                <li><%= link_to "Pomona", "/pomona" %></li>
                <li><%= link_to "Reed", "/reed" %></li>
                <li><%= link_to "Richmond", "/richmond" %></li>
                <li><%= link_to "Rhodes", "/rhodes" %></li>
                <li><%= link_to "Scripps", "/scripps" %></li>
                <li><%= link_to "Sewanee", "/sewanee" %></li>
                <li><%= link_to "Skidmore", "/skidmore" %></li>
                <li><%= link_to "Smith", "/smith" %></li>
                <li><%= link_to "Soka", "/soka" %></li>
                <li><%= link_to "Southwestern", "/southwestern" %></li>
                <li><%= link_to "Spelman", "/spelman" %></li>
                <li><%= link_to "St. Johns University", "/st-johns-university" %></li>
                <li><%= link_to "St. Lawrence", "/st-lawrence" %></li>
                <li><%= link_to "St. Marys College", "/st-marys-college" %></li>
                <li><%= link_to "St. Marys College of Maryland", "/st-marys-college-of-maryland" %></li>
                <li><%= link_to "St. Michaels College", "/st-michaels-college" %></li>
                <li><%= link_to "St. Olaf", "/st-olaf" %></li>
                <li><%= link_to "Swarthmore", "/swarthmore" %></li>
                <li><%= link_to "Thomas Aquinas", "/thomas-aquinas" %></li>
                <li><%= link_to "Transylvania", "/transylvania" %></li>
                <li><%= link_to "Trinity", "/trinity" %></li>
                <li><%= link_to "Union", "/union" %></li>
                <li><%= link_to "University of Puget Sound", "/university-of-puget-sound" %></li>
                <li><%= link_to "Ursinus", "/ursinus" %></li>
                <li><%= link_to "US Air Force Academy", "/us-air-force-academy" %></li>
                <li><%= link_to "US Military Academy", "/us-military-academy" %></li>
                <li><%= link_to "US Naval Academy", "/us-naval-academy" %></li>
                <li><%= link_to "Vassar", "/vassar" %></li>
                <li><%= link_to "VMI", "/vmi" %></li>
                <li><%= link_to "Wabash", "/wabash" %></li>
                <li><%= link_to "Washington and Lee", "/washington-and-lee" %></li>
                <li><%= link_to "Washington and Jefferson College", "/washington-and-jefferson-college" %></li>
                <li><%= link_to "Washington College", "/washington-college" %></li>
                <li><%= link_to "Wellesley", "/wellesley" %></li>
                <li><%= link_to "Wesleyan", "/wesleyan" %></li>
                <li><%= link_to "Westmont", "/westmont" %></li>
                <li><%= link_to "Willamette", "/willamette" %></li>
                <li><%= link_to "Williams", "/williams" %></li>
                <li><%= link_to "Wheaton - Illinois", "/wheaton-illinois" %></li>
                <li><%= link_to "Wheaton - Massachusetts", "/wheaton-massachusetts" %></li>
                <li><%= link_to "Whitman", "/whitman" %></li>
                <li><%= link_to "Wofford", "/wofford" %></li>
            </ul>
        </nav>
    </div>
    <div class="tab-pane" id="rank">
        <h3>National Universities</h3>
        <nav class="list">
            <ol>
                <li class="top_li"><%= link_to "Harvard", "/harvard"%></li>
                <li><%= link_to "Princeton", "/princeton" %></li>
                <li><%= link_to "Yale", "/yale" %></li>
                <li><%= link_to "Columbia", "/columbia" %></li>
                <li><%= link_to "University of Chicago", "/university-of-chicago" %></li>
                <li><%= link_to "MIT", "/mit" %></li>
                <li><%= link_to "Stanford", "/stanford" %></li>
                <li><%= link_to "Duke", "/duke" %></li>
                <li><%= link_to "University of Pennsylvania", "/university-of-pennsylvania" %></li>
                <li><%= link_to "Cal Tech", "/cal-tech" %></li>
                <li><%= link_to "Dartmouth", "/dartmouth" %></li>
                <li><%= link_to "Northwestern", "/northwestern" %></li>
                <li><%= link_to "Johns Hopkins", "/johns-hopkins" %></li>
                <li><%= link_to "Washington University in St. Louis", "/washington-university-in-st-louis" %></li>
                <li><%= link_to "Brown", "/brown" %></li>
                <li><%= link_to "Cornell", "/cornell" %></li>
                <li><%= link_to "Rice", "/rice" %></li>
                <li><%= link_to "Notre Dame", "/notre-dame" %></li>
                <li><%= link_to "Vanderbilt", "/vanderbilt" %></li>
                <li><%= link_to "Emory", "/emory" %></li>
                <li><%= link_to "Georgetown", "/georgetown" %></li>
                <li><%= link_to "UC Berkeley", "/uc-berkeley" %></li>
                <li><%= link_to "Carnegie Mellon", "/carnegie-mellon" %></li>
                <li><%= link_to "UCLA", "/ucla" %></li>
                <li><%= link_to "USC", "/usc" %></li>
                <li><%= link_to "University of Virginia", "/university-of-virginia" %></li>
                <li><%= link_to "Wake Forest", "/wake-forest" %></li>
                <li><%= link_to "Tufts", "/tufts" %></li>
                <li><%= link_to "University of Michigan", "/university-of-michigan" %></li>
                <li><%= link_to "University of North Carolina", "/university-of-north-carolina" %></li>
                <li><%= link_to "Boston College", "/boston-college" %></li>
                <li><%= link_to "NYU", "/nyu" %></li>
                <li><%= link_to "Brandeis", "/brandeis" %></li>
                <li><%= link_to "College of William and Mary", "/college-of-william-and-mary" %></li>
                <li><%= link_to "University of Rochester", "/university-of-rochester" %></li>
                <li><%= link_to "Georgia Tech", "/georgia-tech" %></li>
                <li><%= link_to "Case Western", "/case-western" %></li>
                <li><%= link_to "Lehigh", "/lehigh" %></li>
                <li><%= link_to "UC Davis", "/uc-davis" %></li>
                <li><%= link_to "UC San Diego", "/uc-san-diego" %></li>
                <li><%= link_to "RPI", "/rpi" %></li>
                <li><%= link_to "UC Santa Barbara", "/uc-santa-barbara" %></li>
                <li><%= link_to "University of Wisconsin", "/university-of-wisconsin" %></li>
                <li><%= link_to "UC Irvine", "/uc-irvine" %></li>
                <li><%= link_to "University of Miami", "/university-of-miami" %></li>
                <li><%= link_to "Penn State", "/penn-state" %></li>
                <li><%= link_to "University of Illinois", "/university-of-illinois" %></li>
                <li><%= link_to "University of Texas", "/university-of-texas" %></li>
                <li><%= link_to "University of Washington", "/university-of-washington" %></li>
                <li><%= link_to "Yeshiva", "/yeshiva" %></li>
                <li><%= link_to "Boston University", "/boston-university" %></li><br />
                <li><%= link_to "George Washington University", "/george-washington-university" %></li>
                <li><%= link_to "Tulane", "/tulane" %></li>
                <li><%= link_to "Pepperdine", "/pepperdine" %></li>
                <li><%= link_to "University of Florida", "university-of-florida" %></li>
                <li><%= link_to "Northeastern", "/northeastern" %></li>
                <li><%= link_to "Ohio State", "/ohio-state" %></li>
                <li><%= link_to "Fordham", "/fordham" %></li>
                <li><%= link_to "SMU", "/smu" %></li>
                <li><%= link_to "Syracuse", "/syracuse" %></li>
                <li><%= link_to "University of Maryland", "/university-of-maryland" %></li>
                <li><%= link_to "University of Pittsburgh", "/university-of-pittsburgh" %></li>
                <li><%= link_to "University of Connecticut", "/university-of-connecticut" %></li>
                <li><%= link_to "University of Georgia", "/university-of-georgia" %></li>
                <li><%= link_to "Purdue", "/purdue" %></li>
                <li><%= link_to "Texas A&M", "/texas-am" %></li>
                <li><%= link_to "Worcester Tech", "/worcester-tech" %></li>
                <li><%= link_to "BYU", "/byu" %></li>
                <li><%= link_to "Clemson", "/clemson" %></li>
                <li><%= link_to "Rutgers", "/rutgers" %></li>
                <li><%= link_to "University of Minnesota", "/university-of-minnesota" %></li>
                <li><%= link_to "Michigan State", "/michigan-state" %></li>
                <li><%= link_to "University of Iowa", "/university-of-iowa" %></li>
                <li><%= link_to "Virginia Tech", "/virginia-tech" %></li>
                <li><%= link_to "Stevens Tech", "/stevens-tech" %></li>
                <li><%= link_to "University of Delaware", "/university-of-delaware" %></li>
                <li><%= link_to "American University", "/american-university" %></li>
                <li><%= link_to "Baylor", "/baylor" %></li>
                <li><%= link_to "Colorado School of Mines", "/colorado-school-of-mines" %></li>
                <li><%= link_to "SUNY - ESF", "/suny-esf" %></li>
                <li><%= link_to "University of Alabama", "/university-of-alabama" %></li>
                <li><%= link_to "UC Santa Cruz", "/uc-santa-cruz" %></li>
                <li><%= link_to "Clark University", "/clark-university" %></li>
                <li><%= link_to "Drexel", "/drexel" %></li>
                <li><%= link_to "Indiana University", "/indiana-university" %></li>
                <li><%= link_to "Marquette", "/marquette" %></li>
                <li><%= link_to "University of Denver", "/university-of-denver" %></li>
                <li><%= link_to "University of Tulsa", "/university-of-tulsa" %></li>
                <li><%= link_to "Auburn", "/auburn" %></li>
                <li><%= link_to "Binghamton", "/binghamton" %></li>
                <li><%= link_to "Miami of Ohio", "/miami-of-ohio" %></li>
                <li><%= link_to "St. Louis University", "/st-louis-university" %></li>
                <li><%= link_to "Stony Brook", "/stony-brook" %></li>
                <li><%= link_to "TCU", "/tcu" %></li>
                <li><%= link_to "University of San Diego", "/university-of-san-diego" %></li>
                <li><%= link_to "University of Vermont", "/university-of-vermont" %></li>
                <li><%= link_to "Florida State University", "/florida-state-university" %></li>
                <li><%= link_to "University of Colorado", "/university-of-colorado" %></li>
                <li><%= link_to "University of Massachusetts", "/university-of-massachusetts" %></li>
                <li><%= link_to "University of Missouri", "/university-of-missouri" %></li>
            </ol>
        </nav>

        <h3>Liberal Arts Colleges</h3>
        <nav class="list">
            <ol>
                <li class="top_li"><%= link_to 'Williams', '/williams' %></li>
                <li><%= link_to "Amherst", "/amherst" %></li>
                <li><%= link_to "Bennington College", "/bennington-college" %></li>
            </ol>
        </nav>
    </div>
    <div class="tab-pane" id="size">
        <h3>National Universities</h3>
        <nav class="list">
            <ol>
                <% @national_university.each do |school| %>
                    <li><%= link_to "#{school.name} (#{(number_with_delimiter(school.enrollment, :delimiter => ',') )})", "#{school.url}" %></li>
                <% end %>
            </ol>
        </nav>

        <h3>Liberal Arts Colleges</h3>
        <nav class="list">
            <ol>
                <% @liberal_arts_college.each do |school| %>
                    <li><%= link_to "#{school.name} (#{(number_with_delimiter(school.enrollment, :delimiter => ',') )})", "#{school.url}" %></li>
                <% end %>
            </ol>
        </nav>
    </div>
  </div>
</div>

colleges.js

$('#myTab a[href="#alphabetical"]').tab('show')
$('#myTab a[href="#rank"]').tab('show')
$('#myTab a[href="#size"]').tab('show')

$('#myTab a[href="#alphabetical"]').click(function (e) {
  e.preventDefault();
  $(this).tab('show');
})

$('#myTab a[href="#rank"]').click(function (e) {
  e.preventDefault();
  $(this).tab('show');
})

$('#myTab a[href="#size"]').click(function (e) {
  e.preventDefault();
  $(this).tab('show');
})

colleges.css.scss

@import "bootstrap";

.list {
    -moz-column-count: 4; /* Firefox */
    -webkit-column-count: 4; /* Safari and Chrome */
    column-count: 4;

    -moz-column-gap: 40px; /* Firefox */
    -webkit-column-gap: 40px; /* Safari and Chrome */
    column-gap: 40px;
    ul {
        list-style-type: square;
    }
    li {
        margin: 5px 0;
    }
    .top_li {
        margin-top: -12px;
    }
    a:hover {
        text-decoration: underline;
    }
}

generated html:

<!DOCTYPE html>
<html>
<head>
  <title>Colleges</title>
  <link href="/assets/layout.css?body=1" media="all" rel="stylesheet" type="text/css" />
  <script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/purl.js?body=1" type="text/javascript"></script>
<script src="/assets/college_pages.js?body=1" type="text/javascript"></script>
<script src="/assets/colleges.js?body=1" type="text/javascript"></script>
<script src="/assets/essays.js?body=1" type="text/javascript"></script>
<script src="/assets/home.js?body=1" type="text/javascript"></script>
<script src="/assets/static_pages.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>
  <link href="/assets/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />
  <link rel="shortcut icon" href="/favicon.ico" />
  <meta content="authenticity_token" name="csrf-param" />
<meta content="0GkQ+XMWRG5016NGJzqEp11fZt8eE+b0zvrAqfudlyU=" name="csrf-token" />
  <script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-42526156-1', 'collegeanswerz.com');
    ga('send', 'pageview');
  </script>
</head>
<body>
    <header>        
        <p id="sign_in">
            <a href="/mentor">be a mentor</a><br />
            <a href="/find-a-mentor">find a mentor</a><br /><br /><br />
        </p>

        <div class="idea_bar">
            <div class="left_idea_bar">
                <p>Ideas, comments, questions, suggestions?  Help us help you!</p>
                <form accept-charset="UTF-8" action="/application_controller/email" id="idea_bar_form" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="0GkQ+XMWRG5016NGJzqEp11fZt8eE+b0zvrAqfudlyU=" /></div>
                    <textarea cols="60" id="message" name="message" rows="4">
</textarea> <br />
                    <label for="email">• include your email if you want a response:</label>
                    <input id="email" name="email" size="36" type="text" />
            </div>
                    <button id="submit" type="submit" form="idea_bar_form"><span id="big_submit">Send</span>
                    <span id="small_submit"><br />&#8226 one click<br />&#8226 anonymous</span></button>
</form>     </div>

        <nav id="main_nav">
            <hr />
            <ul>
                <li id="logo"><a href="/"><img alt="CollegeANSWERZ" height="50" src="/assets/favicon.png" width="50" /></a></li>
                <li><a href="/colleges">Colleges</a></li>
                <li> | </li>
                <li><a href="/about-college">About College</a></li>
                <li> | </li>
                <li><a href="/essays">Essays</a></li>
                <!-- <li id="search"><input type="search"></li> -->
                <form accept-charset="UTF-8" action="/search" method="get"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /></div>                    <li id="search"> <input id="search" name="search" placeholder="enter college" type="search" /></li>
</form>         </ul>
            <hr />
        </nav>
    </header>

    <div class="container">
        <link href="/assets/colleges.css?body=1" media="all" rel="stylesheet" type="text/css" />
<script src="/assets/colleges.js?body=1" type="text/javascript"></script>

<h1>Colleges</h1>

<div class="tabbable"> <!-- Only required for left/right tabs -->
  <ul class="nav nav-tabs" id="myTabs">
    <li class="active"><a href="#alphabetical" data-toggle="tab">Alphabetical</a></li>
    <li><a href="#rank" data-toggle="tab">Rank</a></li>
    <li><a href="#size" data-toggle="tab">Size</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="alphabetical">
        <h3>National Universities</h3>
        <nav class="list">
            <ul>
                <li class="top_li"><a href="/american-university">American University</a></li>
                <li><a href="/auburn">Auburn</a></li>
                <li><a href="/yeshiva">Yeshiva</a></li>
            </ul>
        </nav>

        <h3>Liberal Arts Colleges</h3>
        <nav class="list">
            <ul>
                <li class="top_li"><a href="/agnes-scott">Agnes Scott</a></li>
                <li><a href="/wofford">Wofford</a></li>
            </ul>
        </nav>
    </div>
    <div class="tab-pane" id="rank">
        <h3>National Universities</h3>
        <nav class="list">
            <ol>
                <li class="top_li"><a href="/harvard">Harvard</a></li>
                <li><a href="/university-of-missouri">University of Missouri</a></li>
            </ol>
        </nav>

        <h3>Liberal Arts Colleges</h3>
        <nav class="list">
            <ol>
                <li class="top_li"><a href="/williams">Williams</a></li>
                <li><a href="/bennington-college">Bennington College</a></li>
            </ol>
        </nav>
    </div>
    <div class="tab-pane" id="size">
        <h3>National Universities</h3>
        <nav class="list">
            <ol>
                    <li><a href="ohio-state">Ohio State (43,058)</a></li>
                    <li><a href="cal-tech">Cal Tech (997)</a></li>
            </ol>
        </nav>

        <h3>Liberal Arts Colleges</h3>
        <nav class="list">
            <ol>
                    <li><a href="us-military-academy">US Military Academy (4,592)</a></li>
                    <li><a href="college-of-the-atlantic">College of the Atlantic (330)</a></li>
            </ol>
        </nav>
    </div>
  </div>
</div>
    </div>

</body>
</html>

what version of rails? if rails 4, are you using turbolinks? — Jesse Wolgamott
– Jesse Wolgamott, Commented Jul 25, 2013 at 3:03
If you include the bootstrap files it should work fine, look at the demo jsfiddle.net/arunpjohny/7cHVT — Arun P Johny
– Arun P Johny, Commented Jul 25, 2013 at 3:16

Arun P Johny · Accepted Answer · 2013-07-25 04:36:31Z

1

There is no need to have the javascript code since you are using data-toggle="tab".

jQuery(function ($) {
});

Demo: Fiddle

As we discussed in the chat, the problem was the missing bootstrap.js library.

needed to add the library reference in application.js

edited Jul 25, 2013 at 4:36

answered Jul 25, 2013 at 2:40

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Adam Zerner Over a year ago

so do I just put jQuery(function ($) { }); in colleges.js? I tried that and it didn't work.

Arun P Johny Over a year ago

can you share the generated html

Adam Zerner Over a year ago

i posted it as an edit. i deleted a lot of the repetition (the actual list of colleges; i just included the first and last ones in the lists) because my post was too long.

Collectives™ on Stack Overflow

trouble with bootstrap tabbable tabs in rails app

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related