Question

I’m working on a Ruby on Rails app, and I’m trying to have the left side of the page essentially controlled by two tabs. I want the content to swap between the two tabs every time I click on them…just typical tab behavior. I’m using jQuery-ui-tabs. Right now, I have it set up where both tabs are clickable and link to a div but both divs render initially as soon as I load the page, on top of each other, and clicking the tabs takes me to the point on the page where each div starts instead of the page staying in the same place and the content switching. This seems like it shouldn’t be that hard but I’ve spent a really long time being really frustrated, so I would love/appreciate any help!

I wrote a partial view that holds the tabs and the ‘links’ and directs them to divs that render different views.

<div id="tabs">
    <a href="#first">
        <div class="tab">
            <div class="icon">
                <%= image_tag "buddies.png", :class => "icon img b" %>
            </div>
            first tab
         </div>
     </a>
     <a href="#second">
         <div class="tab">
             <div class="icon">
                 <%= image_tag "all.png", :class => "icon img" %>
             </div>
             second tab
         </div>
     </a>
     <div id="roll" class="contents">
      <%= render 'questions/list' %>
     </div>
     <div id="other" class="contents">
         <%= render 'answers/list' %>
     </div>
 </div>

This is my javascript:

$(document).ready(function() {
  $("#tabs").tabs();
});

essentially as per the jquery website

and this is my header with all the jquery js links:

<%= javascript_include_tag "jquery-1.8.2.min.js" %>
<%= javascript_include_tag "jquery-ui-1.8.23.custom.min.js" %>

EDIT: figured it out, wasn’t properly loading the javascript jquery UI file.

Answer 1

In order to create the tabs rendered as tabs, you need to add each tab as <li> item, like this:

<ul>
  <li><a href="#first">Tab Title #1</a></li>
  <li><a href="#second">Tab Title #2</a></li>
</ul>

Now your tabs will be displayed as tabs! You need to add the unordered list after the <div id="tabs">.

As said: look at the documentation about tabs: http://jqueryui.com/tabs/