Solved

jquery tabs

Posted on 2013-11-20
4
213 Views
Last Modified: 2013-12-12
Is that possible to create a number of horizontal tabs and number of vertical tabs on the same page . When clicking on the horizontal tab will show the content and clicking on the vertical tab will show details about that horizontal tab
0
Comment
Question by:erikTsomik
  • 2
4 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 39664332
Assuming jQuery UI - Each tab control can contain another tab control - so the answer is yes.
0
 
LVL 30

Expert Comment

by:Alexandre Simões
ID: 39664355
Sure!
Look here for a live demo: http://jsfiddle.net/AlexCode/R9DtT/

Basically I picked both samples from jquery ui page and combined them.
For the sake of the demo I only added inner tabs in the first horizontal tab but you can do as you want.

What I had to change was the initialization of the inner tabs.
for it to work the main div of the inner tabs must have the class="vtabs"
0
 
LVL 44

Accepted Solution

by:
Rainer Jeschor earned 500 total points
ID: 39664393
Hi,
something like this?
http://jsfiddle.net/EE_RainerJ/uC8RF/

CSS is not 100% perfect - but you should get an idea (sample based on combo of jQueryUI.com samples).

HTH
Rainer
0
 
LVL 44

Expert Comment

by:Rainer Jeschor
ID: 39664397
@AlexCode: sorry for double posting - I did not reload the Q during my jsfiddle prep
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

910 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now