Nested tabs in tab

Question

I am using tab through jquery now I want to add nested tab in tabs. MY problem is when I click on nested tab it will hide main tab and no content will show onclick on nested tab

Here is my code:-

<div id="tabs-container" class="TabView" >
        <ul class="tabs-menu">
            <li class="current"><a href="#tab-1">Guest</a></li>
            <li><a href="#tab-2">Owner</a></li>  
        </ul>
        <div class="tab"> 
            <div id="tab-1" class="tab-content">
<p>test></p>
<div id="subtab">
                    <ul class="tabs-menu">
                      <li><a href="#subtab-1">Me as Guest</a></li>
                    </ul>
                <div id="subtab-1">test2</div>

</div>
</div>

Kindly advise me any solution.

Answer 1

Without seeing the jQuery part of the code nor the CSS we can only guess, anyway probably the problem is that you have to assign a different classname to the ul block in the nested tab. Like this:

<div id="tabs-container" class="TabView" >
    <ul class="tabs-menu">
        <li class="current"><a href="#tab-1">Guest</a></li>
        <li><a href="#tab-2">Owner</a></li>  
    </ul>
    <div class="tab"> 
        <div id="tab-1" class="tab-content">
<p>test></p>
<div id="subtab">
                <ul class="subtabs-menu">
                  <li><a href="#subtab-1">Me as Guest</a></li>
                </ul>
            <div id="subtab-1">test2</div>

</div>
</div>