CODEWITHSUNDEEP
javascriptjquerycss
user1209945
user1209945

Reputation: 81

Create tabs with 2 rows of tabs, 1 content box, javascript/jQuery

I am wondering if anyone has a solution for what seems like an easy problem.

I am trying to create a tab box that has a row of tabs that run across the top of the content box and another row that runs along the bottom of the content box.

Something like this:

  <div id="tabContainer">
    <div id="tabs">
      <ul>
        <li id="tabHeader_1">Tab 1</li>
        <li id="tabHeader_2">Tab 2</li>
        <li id="tabHeader_3">Tab 3</li>
      </ul>
    </div>
    <div id="tabscontent">
      <div class="tabpage" id="tabpage_1">
        <h2>Page 1</h2>
        <p>Content 1</p>
      </div>
      <div class="tabpage" id="tabpage_2">
        <h2>Page 2</h2>
        <p>Content 2</p>
      </div>
      <div class="tabpage" id="tabpage_3">
        <h2>Page 3</h2>
        <p>Content 3</p>
      </div>
              <div class="tabpage" id="tabpage_4">
        <h2>Page 4</h2>
        <p>Content 4</p>
      </div>
              <div class="tabpage" id="tabpage_5">
        <h2>Page 5</h2>
        <p>Content 5</p>
      </div>
              <div class="tabpage" id="tabpage_6">
        <h2>Page 6</h2>
        <p>Content 6</p>
      </div>
    </div>
          <div id="tabs">
      <ul>
        <li id="tabHeader_4">Tab 4</li>
        <li id="tabHeader_5">Tab 5</li>
        <li id="tabHeader_6">Tab 6</li>
      </ul>
    </div>
  </div>

Muchos thank yous to anyone who can help!

Upvotes: 1

Views: 2410

Answers (2)

FelipeAls
FelipeAls

Reputation: 22171

@barlas already stated that #tabs existed twice on the same page: this isn't allowed, use classes.

Here's a fiddle concentrating on the style (CSS) part: http://jsfiddle.net/XXhSQ/

Rows of tabs (both on top and bottom) and the content are displayed as table-row (and their container is displayed as table).
They're still unsemantic div; these table-things are only visual display algorithms applying to them and not suddenly tables used as layout (the latter would mean using HTML elements like table, tr and td).

Then a elements are added into .tabs>li because tabs must be clickable with mouse and focusable with keyboard (and touch, also).
They're displayed as block to occupy the whole width of their container, when their container (li) are displayed as cells of equal widths.
Finally some backgrounds, borders and different rounded borders both on tabs-up and tabs-down for demo purposes.

Compatibility is IE8+. A fallback for IE7- would be using .tabs li { display: inline;zoom:1;} (that's the equivalent of display: inline-block for IE7- because they don't understand either table-things nor inline-block ...)

Upvotes: 0

Barlas Apaydin
Barlas Apaydin

Reputation: 7315

First of all you can not use id on a multiple elements, id's are uniqiue. Change your tabs id to class. Second thing: change your li selector's id's like this for easy manipulation.

Here is working jsFiddle.

html:

   <ul>
        <li id="header_tabpage_1">Tab 1</li>
        <li id="header_tabpage_2">Tab 2</li>
        <li id="header_tabpage_3">Tab 3</li>
   </ul>

jQuery:

$(document).ready(function() {
    $('.tabpage').hide().first().show();

    $('.tabs ul li').click(function() {
       var target = $(this).attr('id').replace('header_','');
       //this will return like 'tabpage_1'

       $('.tabpage').hide();
       $('#'+ target).fadeIn(500);

       $('.tabs ul li').removeClass('selected');
       $(this).addClass('selected');
    });
});

Upvotes: 1

Related Questions