-3

I am using jquery ui tabs and I have a page which have tabs within tabs, and the content of the inner tabs are loaded via Ajax (by passing the URL in the href attribute of my a element). The HTML is like this:

<div class="tabs">
<ul>
<li><a href="#tabs-1">Tab 1</a></li>
<li><a href="#tabs-2">Tab 2</a></li>
<li><a href="#tabs-4">Tab 3</a></li>
</ul>

<div id="tabs-1" class="tabs">
<p>Some content for parent tabs 1</p>

<!-- Inner tabs -->

<ul>
<li><a href="ajax/content1.html">Inner Tab 1</a></li>
</ul>

</div>

<div id="tabs-2" class="tabs">
<p>Some content for parent tabs 2</p>

<!-- Inner tabs -->

<ul>
<li><a href="ajax/content2.html">Inner Tab 2</a></li>
<li><a href="ajax/content3.html">Inner Tab 3</a></li>
</ul>

</div>

<div id="tabs-3" class="tabs">
<p>Some content for parent tabs 3</p>

<!-- Inner tabs -->

<ul>
<li><a href="ajax/content4.html">Inner Tab 4</a></li>
<li><a href="ajax/content5.html">Inner Tab 5</a></li>
<li><a href="ajax/content6.html">Inner Tab 6</a></li>
</ul>

</div>

</div>

What I wanna do is 2 things:

1- Because the contents of the inner tabs are loaded via Ajax, no content is displayed yet for these tabs when the user comes to the page for the first time. So the user has to actually click to reveal the content of the inner tabs, but what I want is that when the user first comes to the page for the first time, I want the content of the default preselected inner tabs to be shown to the user (instead of some blank content)

2- I know that I can set which tabs are selected on initialization by using the selected options of the tabs like so:

$( ".selector" ).tabs({ selected: 0 });

By doing this, I will always get the first tab selected (but that only works when we first initialize the tabs). What I want now is to ALWAYS have the first inner tab selected as the user clicks on the parent tabs. In order words, if the user clicks on Tab 1, I want the inner tab Inner Tab 1 to be selected, if the user clicks on Tab 2, I want the inner tab Inner Tab 2 to be selected, and if the user clicks on Tab 3, I want the inner tab Inner Tab 4 to be selected. I also want the content of the selected tab to be ALWAYS visible.

I hope I was clear enough in my explanation. Please somebody, help me with this.

Thank you

user765368
  • 19,590
  • 27
  • 96
  • 167

1 Answers1

0

For your first point to have some sample content to be shown, use something like below. For innertab1, you don't require to navigate via URL as the content will be loaded via AJAX. Instead for href, give the 'div id' in which the tabs content will be stored like below:

    <ul>
        <li><a href="#innertab1">Inner Tab 1</a></li>

    </ul>
    <div id="innertab1">
        Sample content of inner tab 1. This content will be loaded via ajax
    </div>

Also, I am not sure I understand your second point. When I click on tab1, I see inner tab1, and when I click on tab2, I see inner tab2. What is the issue?

DG3
  • 5,070
  • 17
  • 49
  • 61
  • If I do this, my content will NOT be loaded with Ajax (I would have to do it separately by using jQuery .load() or something), I want to do it as suggested by jQuery UI Tabs on the Ajax section (http://jqueryui.com/demos/tabs/#ajax) – user765368 Feb 26 '12 at 05:45
  • The isssue for the second point is, let's say the user click on Tab 3 and clicks on the inner tab Inner Tab 5. Now let's say the user clicks on Tab 2, if the user returns back to Tab 3, the inner tab Inner Tab 5 will still be selected. I want the first tab to always be the preselected one when the user clicks on a parent tab – user765368 Feb 26 '12 at 05:51
  • See first comment for the reason of downvoting – user765368 Feb 26 '12 at 05:55
  • so what is the difference between the link you have mentioned and the example I provided above? Can you take a clear look? The first preloaded tab is using href value as the value of the div holding its content. – DG3 Feb 26 '12 at 05:59
  • Do you see a preloaded tab in my example? My example is like the example that you see in the link I sent you but with the preloaded tab removed – user765368 Feb 26 '12 at 06:02
  • Ok I see what you mean, to get some preloaded content I will have to have a preloaded tab or something like in the example on the link, but there's gotta be another way – user765368 Feb 26 '12 at 06:11
  • ok I think I got your point. So when the user first comes to the page, the inner tab 1 contents from 'ajax/content1.html' has to be displayed? FYI, it displays for me if that is your question – DG3 Feb 26 '12 at 06:11