Hello,
I am new here and don't have any jQuery programming skills at all. However, I would like to achieve the following. I have some tabs with a drop-line sub links.
What I want is, when clicked, to display the content of the main tab and all the contents of the sub links in the div.css-panes. When a sub link is clicked then to only display the contents of that link in the div.css-panes.
This is my html:
And this is the working plugin:
I tried to post the css as well, but for some reason the system does not allow this.
I am new here and don't have any jQuery programming skills at all. However, I would like to achieve the following. I have some tabs with a drop-line sub links.
What I want is, when clicked, to display the content of the main tab and all the contents of the sub links in the div.css-panes. When a sub link is clicked then to only display the contents of that link in the div.css-panes.
This is my html:
<div class="header">
<!-- tabs -->
<ul class="css-tabs">
<li><a href="#" class="current"><b>Artwork</b>
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub">
<li><a href="#nogo"><strong>Sub Artwork 1</strong></a></li>
<li><a href="#nogo"><strong>Sub Artwork 2</strong></a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#"><b>Covers</b>
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub">
<li><a href="#nogo"><strong>Sub Covers 1</strong></a></li>
<li><a href="#nogo"><strong>Sub Covers 2</strong></a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#"><b>Labels</b>
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub">
<li><a href="#nogo"><strong>Sub Labels 1</strong></a></li>
<li><a href="#nogo"><strong>Sub Labels 2</strong></a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<!-- /tabs -->
</div>
<div class="sub-container"></div>
<!-- tab panes -->
<div class="css-panes">
<div style="display:block;">Artwork Main Content</div>
<!-- Begin Sub Content -->
<div class="sub-panes">Sub Artwork Content 1</div>
<div class="sub-panes">Sub Artwork Content 2</div>
<!-- // End Sub Content -->
<div>Covers Main Content</div>
<!-- Begin Sub Content -->
<div class="sub-panes">Sub Covers Content 1</div>
<div class="sub-panes">Sub Covers Content 2</div>
<!-- // End Sub Content -->
<div>Labels Main Content</div>
<!-- Begin Sub Content -->
<div class="sub-panes">Sub Labels Content 1</div>
<div class="sub-panes">Sub Labels Content 2</div>
<!-- // End Sub Content -->
</div>
And this is the working plugin:
$(function() {
// :first selector is optional if you have only one tabs on the page
$("ul.css-tabs").tabs("div.css-panes > div");
});
I tried to post the css as well, but for some reason the system does not allow this.
