Question

I need to add this in Content Management System where each editor box has a char. limit of 4000. I cannot fit all my content div inside, I need to put each tab content div in a separate editor box. That’s why I need to get rid of the wrapper div.

I have the following tab script WITH wrapper div “tabs”:

<div class="tabs">
  <ul class="nav">
    <li><a href="#t1">one</a></li>
    <li><a href="#t2">two</a></li>
    <li><a href="#t3">three</a></li>
  </ul>

  <div id="t1">a lot of content</div>
  <div id="t2">a lot of content</div>
  <div id="t3">a lot of content</div>
</div>

jQuery code:

$(function () {
    var tabContainers = $('div.tabs > div');

    $('div.tabs ul.nav a').click(function () {
    tabContainers.hide().filter(this.hash).show();

    $('div.tabs ul.nav a').removeClass('selected');
    $(this).addClass('selected');

    return false;
    }).filter(':first').click();
});

---

My idea was to add a common class “series1” to each of my content in order to archive the same effect but doesn’t work: (am a jquery noob)

  <ul class="nav">
    <li><a href="#t1">one</a></li>
    <li><a href="#t2">two</a></li>
    <li><a href="#t3">three</a></li>
  </ul>

  <div id="t1" class="series1">content</div>
  <div id="t2" class="series1">content</div>
  <div id="t3" class="series1">content</div>

---

$(function () {
    var tabContainers = $('div.series1');

    $('ul.nav a').click(function () {
    tabContainers.hide().filter(this.hash).show();

    $('ul.nav a').removeClass('selected');
    $(this).addClass('selected');

    return false;
    }).filter(':first').click();
});

It doesn’t matter if I have to manually mention the individual id/class name in the jQuery, someone could help me to make this work?

Thanks a lot!!

Answer 1

This type of functionality is quite easy to implement in jQuery without .tabs(), take a look at this fiddle for some ideas.