jquery Tab content placement issue

Question

I have a Tab item. Which is kind of different, because it works vertically. FIDDLE

Functionally it's working fine. Problem I am facing is if I click Tab 2 or Tab 3 , Tab item for these remain at the top. here is the quick Image:

enter image description here

You can see I have selected tab 3 and "Tab3 item" is showing it the top. What I am wanting is "Tab item " should remain at the same level with "tab" So here "tab3 item" should in line with "tab3".

I know this is Possible with CSS giving margin top on each of the tab item. But the problem is, there can be 100 of list. And for each of them giving margin can be a pain.

So I was looking for a dynamic solution so that "tab item" follow related tab. Is this possible with jQuery ? I am not very good in jquery and I am looking for help. Any solution will be much appreciated.

HTML

<div class="tab-content">
    <ul id="tabs">
                <li><a href="#tab1">tab1</a></li>
                <li><a href="#tab2">tab2</a></li>
                <li><a href="#tab3">tab3</a></li>
    </ul>
</div> 

<div id="content">
            <div class="content-item" id="tab1">tab1 Item</div>
            <div class="content-item" id="tab2">tab2 Item</div>
            <div class="content-item" id="tab3">tab3 Item</div>
</div>

JS for tab

$(document).ready(function() {
    $("#content div").hide(); // Initially hide all content
    $("#tabs li:first").attr("id","current"); // Activate first tab
    $("#content div:first").fadeIn(); // Show first tab content
    $('#tabs li a').click(function(e) {
        e.preventDefault();
        if ($(this).attr("id") == "current"){ //detection for current tab
         return       
        }
        else{             
        $("#content div").hide(); //Hide all content
        $("#tabs li").attr("id",""); //Reset id's
        $(this).parent().attr("id","current"); // Activate this
        $( $(this).attr('href')).fadeIn(); // Show content for current tab
        }
    });
});

[Sorry for Bad English :)]

http://stackoverflow.com/questions/6393632/jquery-hide-element-while-preserving-its-space-in-page-layout — caleb.breckon, Aug 21 '14 at 18:23
Caleb is right, Updated JS Fiddle: http://jsfiddle.net/5ezT3/46/ — Duane, Aug 21 '14 at 18:26
This is some sort of correct but problem is if tab items has different amount of Content it will not match the level ! like if I have many thing in tab item 1 and select tab2. Tab item 2 will go much down. Example : http://jsfiddle.net/5ezT3/47/ — Raihan, Aug 21 '14 at 18:32

score 0 · Answer 1 · answered Aug 21 '14 at 18:28

$("#content div").css('visibility','hidden'); // Initially hide all content
...
$("#content div:first").css('visibility','visible').hide().fadeIn(); // Show first tab     content
...
$("#content div").css('visibility','hidden'); //Hide all content
...
$(this).attr('href')).css('visibility','visible').hide().fadeIn();

jquery Tab content placement issue

1 Answers1