Tabs inside tabs, problem with divs inside tabs

0
June 25, 2016

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.tabcontent.

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

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.vtabcontent arent visible. I dont know how to fix this :<

Best regards.

<!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  $('.tabcontent div').hide(); // Hide all divs $('.tabcontent 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(&quot;active&quot;); //Add &quot;active&quot; class to selected tab var currentTab = $(this).attr('href'); // Set variable currentTab to value of href attribute of clicked link $('.tabcontent div').hide(); // Hide all divs $(currentTab).fadeIn().show(); // Show div with id equal to variable currentTab return false; });  //VERTICAL TABS $('.vtabcontent div').hide(); // Hide all divs $('.vtabcontent 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 $('.vtabcontent div').hide(); // Hide all divs $(currentTab).fadeIn().show(); // Show div with id equal to variable currentTab return false; });});&lt;/script&gt;&lt;/head&gt;&lt;body&gt;&lt;ul id=&quot;tabs&quot; class=&quot;grey&quot;&gt; &lt;li&gt;&lt;a href=&quot;#one&quot; class=&quot;active&quot;&gt;&lt;span&gt;tab1&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;#two&quot; class=&quot;active&quot;&gt;&lt;span&gt;tab2&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;#three&quot; class=&quot;active&quot;&gt;&lt;span&gt;tab3&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;div class=&quot;tab&quot;&gt; &lt;div class=&quot;tabtop"> <div></div> </div> <div class="tabcontent&quot;&gt; &lt;!--TAB ONE CONTENT--&gt; &lt;div id=&quot;one&quot;&gt; &lt;ul id=&quot;vtabs&quot; class=&quot;vblue&quot;&gt; &lt;li&gt;&lt;a href=&quot;#vtab1&quot; class=&quot;active&quot;&gt;vtab1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;#vtab2&quot;&gt;vtab2&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;#vtab3&quot;&gt;vtab3&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;div class=&quot;vtabcontent"> <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="vtabcontent&quot;&gt; &lt;div id=&quot;vtab1&quot;&gt; &lt;p&gt;vtab one&lt;/p&gt; &lt;/div&gt; &lt;div id=&quot;vtab2&quot;&gt; &lt;p&gt;vtab two&lt;/p&gt; &lt;/div&gt; &lt;div id=&quot;vtab3&quot;&gt; &lt;p&gt;vtab three&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;!--TAB THREE CONTENT--&gt; &lt;div id=&quot;three&quot;&gt; &lt;ul id=&quot;vtabs&quot; class=&quot;vblue&quot;&gt; &lt;li&gt;&lt;a href=&quot;#vtab1&quot; class=&quot;active&quot;&gt;vtab1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;#vtab2&quot;&gt;vtab2&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;#vtab3&quot;&gt;vtab3&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;div class=&quot;vtabcontent"> <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>

Comments See all(0)

Add comment
0
June 25, 2016

First off, there are about 4 's too many scattered around that code. Second, ids can only be called once per page, only classes can be reused. Instead of naming each tab something unique and tying it directly to you jQuery code, try naming like objects with the same class and ordering them based on their index. That will allow you to expand you code later, adding more horizontal and vertical tabs, more easily.

I've taken the liberty fo just re-writing all of your code from the ground up. The only pieces of CSS you need to keep are these two lines:

.h-tabscontent { display: none; }

.vinside { display: none; }

That's only to avoid a momentary blink while the page loads. The rest of the CSS trash after checking the code, it's just for looks.

*

  • *

    Vertical Tab 1.1 Content.
    *

    *

    Vertical Tab 1.2 Content.

    Vertical Tab 1.3 Content.
    *

    *

    Vertical Tab 1.4 Content.

    Vertical Tab 1.5 Content.
    *

    *

    * *
    Vertical Tab 2.1 Content.
    Vertical Tab 2.2 Content.
    * *
    Vertical Tab 2.3 Content.

    * *
    * *
      * *
    • * *
    • * *
    • * *
    * *
    Vertical Tab 3.1 Content.
    * *
    Vertical Tab 3.2 Content.
    Vertical Tab 3.3 Content.

    Be sure to tab your code as well, it really helps readability in the future. Good luck!

    0
    June 25, 2016

    I like your example, but your code isn't working right. It is displaying everything in the appropriate positions, but the click actions are not working. Could you perhaps tell me what is wrong with the code?

    0
    June 25, 2016

    Is there a way to load external file into

    .v_inside

    ? It will be easier to edit external pages when the site gets bigger, and easier to edit Model,View, Controller files, especially when using framework. Maybe the solution will be simpler than above when using jQuery tabs? I dont know, just typing suggestions

    EDIT 13/Jan/2010:

    Today, after 60min or more, I produced this piece of code.

    Basically it will load content (external file) via ajax when you press tab. It is possible to use normal div as a container. I used jQuery Tabs.

    Code in previous post, written by  brad.estey, help me a lot with jQuery syntax . Thanks one more time.

    If you have suggestions or advices please write them immediately in this topic.

    Best Regards.

    EDIT 17/Jan/2010:

    I solved the problem with jQuery Tools.

    Normal nested:

    http://flowplayer.org/tools/demos/tabs/multiple.html

    Ajax:

    http://flowplayer.org/tools/demos/tabs/ajax.html

    Related Questions

    Show/hide content tab problem - total newby

    I don't have a clue as far as jQuery and javascript are concerned so if someone could take a look at a site for me and tell me what the problem is I would be very grateful. The url is www.evodiscoun Read More

    Views

    10

    Votes

    0

    Answers

    0

    June 23, 2016

    Need help moving jquery tab script from demo to live

    Hi there everyone! I found a script with a jquery feature I'd like, namely fading transition between text elements. The demo is here:(disconnected tabs) http://os.alfajango.com/easytabs/#disconnecte Read More

    Views

    15

    Votes

    0

    Answers

    7

    June 18, 2016

    How to fold out 3 lines next to each other onclick and close them on click?

    I have to say, that I am a beginner at the field of website building, but I'm kind of managing. The thing is that I have a problem with three lines I want to fold out 'on click' and close them 'onclic Read More

    Views

    14

    Votes

    0

    Answers

    5

    June 19, 2016

    This is the very first question

    Hello guys! This is the first post in this site Read More

    Views

    2k

    Votes

    4

    Answers

    2

    January 08, 2016

    report values not showing up.

    I have a crystal report which I pass a DataSet to using VB.NET. The report was working fine, but then I make some changes to the import query and now nothing shows up in the crystal report. Crystal do Read More

    Views

    1k

    Votes

    0

    Answers

    12

    September 06, 2005

    Event log doesn't overwrite as needed in SP4

    Hello All, After upgrading from SP3 to SP4 on several Windows 2000 PRO machines everything looked fine, but from time to time applications can&#39;t write to the event log. When I try to view the appl Read More

    Views

    1k

    Votes

    0

    Answers

    9

    May 11, 2003

    "Failed to self-register XYZ.dll"

    Hi there, I wrote a OLE-automation-server DLL in VB4.0. I use Installshield Express to install it as part of my program on the target computers. Now on some computers I get the message &quot;Failed to Read More

    Views

    1k

    Votes

    0

    Answers

    2

    November 08, 1998

    Please help understand these notes on image processing

    Can someone please help me understand these lecture notes... On the right of the page; What does &quot;normalised by one notion of the area of a pixel&quot; mean? On the first formula for A, Is that a Read More

    Views

    1k

    Votes

    0

    Answers

    3

    February 05, 2009

    Can someone please explain this paragram on the chain rule in image processing

    Please see the screenshot, How is 3133030 got from 10103322? Read More

    Views

    1k

    Votes

    0

    Answers

    1

    January 05, 2009

    AD on 2003

    We have created an AD Domain on Windows 2000 Server with no problems. We just created an AD Domain on Windows 2003 and we&#39;re getting some weird problems. Both of these domains are behind firewalls Read More

    Views

    1k

    Votes

    0

    Answers

    15

    May 11, 2003

    ADDT ASP Upload Error " Type mismatch: 'tNG_isFileInsideBaseFolder' "

    I am trying to create a simple insert record and upload image function on an ASP page built using Adobe Dreamweaver Developer Toolkit. I have done this many times before with no problem, however, i ha Read More

    Views

    1k

    Votes

    0

    Answers

    0

    November 02, 2008

    MYSQL Select query with custom ORDER BY

    Hi, is it possible to customize the order of the returned rows in mysql? Example: I have a Table with a column &quot;name&quot;, now I want to have all entries ordered by name, but I want the entries Read More

    Views

    1k

    Votes

    0

    Answers

    5

    July 02, 2010

    Folder Redirection in Server 2003

    We have a Windows Server 2003 Standard Ed. Is there a way to redirect the users my documents to a folder that has already been created on the server? Read More

    Views

    935

    Votes

    0

    Answers

    2

    July 05, 2007

    Partiton magic  version 8.0 having error 1523 while executing batch

    I followed the partition magic 8.0 wizard to partition my hard disk while rebooting &#160;I came across this problem &#160;&quot;error 1523 while executing batch&quot; What can I do to solve this prob Read More

    Views

    860

    Votes

    0

    Answers

    2

    May 11, 2003

    Please explain this paragraph in image processing (screenshot attached)

    Two questions; How is the equation (10.1-15) formed? &quot;are isotropic for rotation increments of 90 degrees and 45 degrees respectively&quot; What does this mean Read More

    Views

    658

    Votes

    0

    Answers

    7

    January 05, 2009

    xp_cmdshell with net use

    Hi, when I use &#39;net use \192.168.0.1\c$ password /user:username&#39; at the command prompt, it works fine. &#160;But if i try to use it in sql with &quot; exec master..xp_cmdshell &#39;net use \19 Read More

    Views

    615

    Votes

    0

    Answers

    5

    April 11, 2003

    hp ux11

    i have a hp ux11 server. and i edited the /etc/resolv.conf to use my win2003 server dns server. That went fine, however, I would like to go the other way and add an entry on my win2003 dns to resolve Read More

    Views

    358

    Votes

    0

    Answers

    3

    October 12, 2009

    Using an application over a LAN

    I have written an application that needs to be used on a LAN. &#160;The application setup wizard takes care of registering everything on a single PC, but how do you go about writing a setup program th Read More

    Views

    314

    Votes

    0

    Answers

    9

    August 07, 1998

    Need subnet of 12 IPs.

    Please, Can someone help me to create a subnet consisting of 12 IP&#39;s. Thanks.. Read More

    Views

    311

    Votes

    0

    Answers

    5

    April 11, 2003

    Drill down in a cross-tabl report

    Hello, Would some experts to show me if it is possible to do drill-up or drill-down (or both) in a cross-tab report? I would also like to know if it is possible to control what fields to be displayed/ Read More

    Views

    253

    Votes

    0

    Answers

    0

    September 06, 2005