css left help jquery

Question

ok so basically I have a setup like this:

<div id="tabs">
    <div id="tab_one">
        Something here
    </div>

    <div id="tab_two">
        Something else here
    </div>

    <div id="tab_three">
        Another thing here
    </div>
</div>

Now my css looks like this:

#tab_one {
    position:relative;
    left:0px;
    top:0px;
}
#tab_two {
    position:relative;
    left:5000px;
}
#tab_three {
    position:relative;
    left:5000px;
}

so basically what I am doing here is only showing tab_one. Then when a user clicks tab_two it changes tab_two to left:0px; and changes tab_one to left:5000px; (so it just switches the the property). The problem is because its relative it is going below the height of the tab that was before it. So if tab_one's height is 50px then tab_two's top will be 50px. I need it to be 0px. It works if I set it to absolute and then back to relative but that is not possible for the project that I am working on because it reloads the tab which I do not want to happen. Any help in figuring out how to overlap or make it 0 instead of 50 would be greatly appreciated.

Answer 1

It looks like you have you may have your position absolute and position relative mixed up... check out this great tutorial on CSS positioning.

That being said, I threw together this example for you to look at (working here).

CSS

.tabs {
 position: relative;
 left: 0;
 top: 0;
}
.info {
 position: absolute;
 left: -5000px;
 top: 25px;
}
.active {
 position: absolute;
 top: 25px;
 left: 0;
}

HTML

<div class="tabs">
 <a href="#tab_one">Tab 1</a>
 <a href="#tab_two">Tab 2</a>
 <a href="#tab_three">Tab 3</a>

 <div>
  <div id="tab_one" class="info">
   Something here
  </div>

  <div id="tab_two" class="info">
   Something else here
  </div>

  <div id="tab_three" class="info">
   Another thing here
  </div>
</div>

Script

$(document).ready(function(){
 // select first tab, get ID
 var tmp = $('.tabs a:eq(0)').attr('href');
 $(tmp).removeClass('info').addClass('active');

 // tab display
 $('.tabs a').click(function(){
  $('.tabs div > div').removeClass('active').addClass('info');
  $( $(this).attr('href') ).addClass('active');
  return false;
 })
})

EDIT: Opps the ".tabs a" CSS in the pastebin code was left over from when I started out with each tab as a div... it doesn't do anything, so you can ignore it LOL.

Answer 2

Instead of using offsets, you can hide/show the tabs with the display property. Add the "tab" class to the tab containers:

<div id="tabs">
    <div id="tab_one" class="tab">
        Something here
    </div>

    <div id="tab_two" class="tab">
        Something else here
    </div>

    <div id="tab_three" class="tab">
        Another thing here
    </div>
</div>

And the stylesheet is:

.tab { display: none } /* Don't render by default */

.show_tab_one #tab_one,
.show_tab_two #tab_two,
.show_tab_three #tab_three { display: block } /* Selectively render */

All you have to do is to set the class of the #tabs element to one of "show_tab_one", "show_tab_two" or "show_tab_three". Of course, if you have a dynamic number of tabs with dynamic ids, this solution won't work for you.