Tabs inside tabs, problem with divs inside tabs

Tabs inside tabs, problem with divs inside tabs

 

Hi,

I have problem with jQuery tabs. I have horizontal tabs: ul#tabs and vertical tabs: ul#vtabs.

Content divs for horizontal tabs are div#one, div#two, div#three. They are inside div.tab_content.

Content divs for vertical tabs are div#vtab1, div#vtab2, div#vtab3. They are inside  div.vtab_content.



The problem is that when I open the page all 3 horizontal tabs have class active, when I click on the vtab  next visit tab2 for example and return to tab1 all vtabs are without active class. Divs inside div.vtab_content arent visible. I dont know how to fix this :<

Best regards.

      
    
       
  1.  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <script type="text/javascript" src="../scripts/jquery-1.3.2.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){

     //HORIZONTAL TABS
     
     $('.tab_content div').hide(); // Hide all divs

     $('.tab_content div:first').show(); // Show the first div
     $('ul#tabs li a:first').addClass('active'); // Set the class of the first link to active
     
     $('ul#tabs li a').click(function(){ //When any link is clicked
     
     $('ul#tabs li a').removeClass('active'); // Remove active class from all links
     $(this).addClass("active"); //Add "active" class to selected tab
     var currentTab = $(this).attr('href'); // Set variable currentTab to value of href attribute of clicked link
     $('.tab_content div').hide(); // Hide all divs
     $(currentTab).fadeIn().show(); // Show div with id equal to variable currentTab

     return false;
     });
     
     //VERTICAL TABS

     $('.vtab_content div').hide(); // Hide all divs

     $('.vtab_content div:first').show(); // Show the first div
     $('ul#vtabs li a:first').addClass('active'); // Set the class of the first link to active
     
     $('ul#vtabs li a').click(function(){ //When any link is clicked
     
     $('ul#vtabs li a').removeClass('active'); // Remove active class from all links
     $(this).addClass("active"); //Add "active" class to selected tab
     var currentTab = $(this).attr('href'); // Set variable currentTab to value of href attribute of clicked link
     $('.vtab_content div').hide(); // Hide all divs
     $(currentTab).fadeIn().show(); // Show div with id equal to variable currentTab

     return false;
     });
    });
    </script>
    </head>
    <body>
    <ul id="tabs" class="grey">
     <li><a href="#one" class="active"><span>tab1</span></a></li>
     <li><a href="#two" class="active"><span>tab2</span></a></li>
     <li><a href="#three" class="active"><span>tab3</span></a></li>
    </ul>
    <div class="tab">
     <div class="tab_top">
     <div></div>
     </div>
     <div class="tab_content">
     <!--TAB ONE CONTENT-->
     <div id="one">
     <ul id="vtabs" class="vblue">
     <li><a href="#vtab1" class="active">vtab1</a></li>
     <li><a href="#vtab2">vtab2</a></li>
     <li><a href="#vtab3">vtab3</a></li>
     </ul>
     <div class="vtab_content">
     <div id="vtab1">
     <p>vtab one</p>
     </div>
     <div id="vtab2">
     <p>vtab two</p>
     </div>
     <div id="vtab3">
     <p>vtab three</p>
     </div>
     </div>
     </div>
     <!--TAB TWO CONTENT-->
     <div id="two">
     <ul id="vtabs" class="vblue">
     <li><a href="#vtab1" class="active">vtab1</a></li>
     <li><a href="#vtab2">vtab2</a></li>
     <li><a href="#vtab3">vtab3</a></li>
     </ul>
     <div class="vtab_content">
     <div id="vtab1">
     <p>vtab one</p>
     </div>
     <div id="vtab2">
     <p>vtab two</p>
     </div>
     <div id="vtab3">
     <p>vtab three</p>
     </div>
     </div>
     </div>
     <!--TAB THREE CONTENT-->
     <div id="three">
     <ul id="vtabs" class="vblue">
     <li><a href="#vtab1" class="active">vtab1</a></li>
     <li><a href="#vtab2">vtab2</a></li>
     <li><a href="#vtab3">vtab3</a></li>
     </ul>
     <div class="vtab_content">
     <div id="vtab1">
     <p>vtab one</p>
     </div>
     <div id="vtab2">
     <p>vtab two</p>
     </div>
     <div id="vtab3">
     <p>vtab three</p>
     </div>
     </div>
     </div>
     </div>
     <div class="tab_bottom">
     <div></div>
     </div>
    </div>
    </body>
    </html>

























































































































    2.