X3Photo Gallery Forums

Thomas · 27 Sep 2016, 04:45

Hi Karl,

I am looking to do something complicated since I can not ...
But what seems to complicated for me, certainly not is for you ... So here goes:

I try to make a page with the "Tabs" that contain "Tabs" ...
I feel like I'm having a little trouble explaining this to you so I'll put the code I insert into my page below:

<section class="tabs-container vertical tabs-radius tabs-anim tabs-color-active">
<ul class="tabs vertical" data-tab>
<li class="tab-title active"><a href="#panel5">Tabs A</a></li>
<li class="tab-title"><a href="#panel6">Tabs B</a></li>
<li class="tab-title"><a href="#panel7">Tabs C</a></li>
<li class="tab-title"><a href="#panel8">Tabs D</a></li>
</ul>
<div class="tabs-content vertical">
<div class="content active" id="panel5">
<section class="tabs-container tabs-style-1 tabs-radius tabs-anim tabs-color-active">
<ul class="tabs horizontal" data-tab>
<li class="tab-title active"><a href="#panel1">Tabs 1</a></li>
<li class="tab-title"><a href="#panel2">Tabs 2</a></li>
<li class="tab-title"><a href="#panel3">Tabs 3</a></li>
<li class="tab-title"><a href="#panel4">Tabs 4</a></li>
</ul>
<div class="tabs-content vertical">
<div class="content active" id="panel1">
<p>Test Tab 1</p>
</div>
<div class="content" id="panel2">
<p>Test Tab 2</p>
</div>
<div class="content" id="panel3">
<p>Test Tab 3</p>
</div>
<div class="content" id="panel4">
<p>Test Tab 4</p>
</div>
</div>
</section>
</section>

So has left, I have 4 main Tabs (A, B, C and D) and the top Tabs (1,2,3 and 4)
If I go to the Tab B, I would like to see appear in the top Tabs (5,6,7 and 8).
On the Tab C, I would like to top the Tabs (9,10,11,12)
And the D (13,14,15,16)

All this seems to you it you can?

Thank you.

27 Sep 2016, 05:26

This would work, but you gotta remember to contain your child tabs inside a tabs content element ... seems your code is a bit incomplete.

<section class="tabs-container tabs-style-1 tabs-radius tabs-anim tabs-color-active">

<!-- tab links -->
<ul class="tabs vertical" data-tab>
<li class="tab-title active"><a href="#panel1">Tab 1</a></li>
<li class="tab-title"><a href="#panel2">Tab 2</a></li>
<li class="tab-title"><a href="#panel3">Tab 3</a></li>
</ul>

<!-- tabs content -->
<div class="tabs-content vertical">

<div class="content active" id="panel1">
<!-- ADD A FULL SEPARATE TABS SECTION WITHIN A TABS CONTENT ELEMENT  LIKE THIS --->
</div>

<div class="content" id="panel2">
<p>This is the second panel of the basic tab example. This is the second panel of the basic tab example.</p>
</div>

<div class="content" id="panel3">
<p>This is the third panel of the basic tab example. This is the third panel of the basic tab example.</p>
</div>

</div>
</section>

For example:

<section class="tabs-container tabs-style-1 tabs-radius tabs-anim tabs-color-active">

<ul class="tabs vertical" data-tab>
<li class="tab-title active"><a href="#panel1">Tab 1</a></li>
<li class="tab-title"><a href="#panel2">Tab 2</a></li>
<li class="tab-title"><a href="#panel3">Tab 3</a></li>
<li class="tab-title"><a href="#panel4">Tab 4</a></li>
</ul>

<div class="tabs-content vertical">
<div class="content active" id="panel1">

<!-- New inner tabs section inside a content panel -->
<section class="tabs-container tabs-style-1 tabs-radius tabs-anim tabs-color-active">

<ul class="tabs vertical" data-tab>
<li class="tab-title active"><a href="#panel5">Tab 1</a></li>
<li class="tab-title"><a href="#panel6">Tab 2</a></li>
<li class="tab-title"><a href="#panel7">Tab 3</a></li>
<li class="tab-title"><a href="#panel8">Tab 4</a></li>
</ul>

<div class="tabs-content vertical">
<div class="content active" id="panel5">
<p>This is the first panel of the basic tab example. You can place all sorts of content here including a grid.</p>
</div>
<div class="content" id="panel6">
<p>This is the second panel of the basic tab example. This is the second panel of the basic tab example.</p>
</div>
<div class="content" id="panel7">
<p>This is the third panel of the basic tab example. This is the third panel of the basic tab example.</p>
</div>
<div class="content" id="panel8">
<p>This is the fourth panel of the basic tab example. This is the fourth panel of the basic tab example.</p>
</div>
</div>

</section>
<!-- End inner tabs section -->

</div>
<div class="content" id="panel2">
<p>This is the second panel of the basic tab example. This is the second panel of the basic tab example.</p>
</div>
<div class="content" id="panel3">
<p>This is the third panel of the basic tab example. This is the third panel of the basic tab example.</p>
</div>
<div class="content" id="panel4">
<p>This is the fourth panel of the basic tab example. This is the fourth panel of the basic tab example.</p>
</div>
</div>

</section>

PS! There will be some minor issues with inherited styles when using tabs inside tabs.

X3Photo Gallery Forums

Tabs2 posts

Tabs

Re: Tabs