PDA

View Full Version : Tab Content script with nested tabs issue



Foundas
09-25-2011, 08:55 PM
1) Script Title: Tab Content Script (v 2.2)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm

3) Describe problem:

Hello guys,

i am using the above script with nested tab content where for each link, an arbitrary div is shown (as in demo #2 of the script)

The problem is that once the first link is selected and the tab is shown, when you click on another tab, the first div is still shown.
I would appreciate your help to fix this problem. The correct behaviour would be to show only the current visited arbitrary div

below is the code im using:
HEAD:

<link rel="stylesheet" type="text/css" href="includes/nestabcontent/tabcontent.css" />
<script type="text/javascript" src="includes/nestabcontent/tabcontent.js"></script>


BODY:


<body id="pagefaqs">
<div id="main-tail-top">
<div id="main-tail-bot">
<div id="main">
<div id="content-bg-1">
<section id="content-1">
<div class="indent">
<div class="row-2">
<div class="wrapper">
<article class="col-1">
<h2><span>FAQ Categories</span></h2>
<dl class="list-1" id="category">
<dt><a href="#" rel="category1" rev="faqdefault" style="display:none;" class="selected"></a></dt>
<dt><a href="#" rel="category2">Platform</a></dt>
<dd>FAQs Platform</dd>
<dt><a href="#" rel="category3">Jurisdiction</a></dt>
<dd>FAQs Jurisdiction</dd>
<dt><a href="#" rel="category4">Formation</a></dt>
<dd>FAQs Formation</dd>
</dl>
</article>
<div id="faqdefault" style="display:none; position:absolute; right: 200px;">
<article class="col-3">
<h2><span>FAQ Answers</span></h2>
<p class="extra">These FAQ & Answers should provide a good guide</p>
</article>
</div>
<article class="col-2">
<h2><span>Common Questions</span></h2>
<div id="category1" class="tabcontent">
<h6>Click one a category from left menu to reveal some of the most frequently asked questions.</h6>
</div>
<div id="category2" class="tabcontent">
<dl class="list-1" id="platformtabs">
<dt>&nbsp;&nbsp;<a href="#" rel="platform1" rev="faqplatform1">Why use Platform?</a></dt><br />
<dt>&nbsp;&nbsp;<a href="#" rel="platform2" rev="faqplatform2">How does Platform?</a></dt><br />
</dl>
<div style="display:none;">
<div id="platform1" class="tabcontent"></div>
<div id="platform2" class="tabcontent"></div>
</div>

<script type="text/javascript">
var platfm=new ddtabcontent("platformtabs")
platfm.setpersist(true)
platfm.setselectedClassTarget("link") //"link" or "linkparent"
platfm.init()
</script>
</div>
<div id="category3" class="tabcontent">
<dl class="list-1" id="jurisdictiontabs">
<dt>&nbsp;&nbsp;<a href="#" rel="jurisdiction1" rev="faqjurisdiction1">Why use Jurisdiction?</a></dt><br />
<dt>&nbsp;&nbsp;<a href="#" rel="jurisdiction2" rev="faqjurisdiction2">How does Jurisdiction?</a></dt><br />
</dl>
<div style="display:none;">
<div id="jurisdiction1" class="tabcontent"></div>
<div id="jurisdiction2" class="tabcontent"></div>
</div>

<script type="text/javascript">
var jurisdict=new ddtabcontent("jurisdictiontabs")
jurisdict.setpersist(true)
jurisdict.setselectedClassTarget("linkparent") //"link" or "linkparent"
jurisdict.init()
</script>
</div>
<div id="category4" class="tabcontent">
<dl class="list-1" id="formationtabs">
<dt>&nbsp;&nbsp;<a href="#" rel="formation1" rev="faqformation1">Why use Formation?</a></dt><br />
<dt>&nbsp;&nbsp;<a href="#" rel="formation2" rev="faqformation2">How does Formation?</a></dt><br />
</dl>
<div style="display:none;">
<div id="formation1" class="tabcontent"></div>
<div id="formation2" class="tabcontent"></div>
</div>
<script type="text/javascript">
var formatn=new ddtabcontent("formationtabs")
formatn.setpersist(true)
formatn.setselectedClassTarget("link") //"link" or "linkparent"
formatn.init()
</script>
</div>
<script type="text/javascript">
var categories=new ddtabcontent("category")
categories.setpersist(true)
categories.setselectedClassTarget("link") //"link" or "linkparent"
categories.init()
</script>
</article>

<!-- PLATFORM HERE -->
<div id="faqplatform1" style="display:none; right: 200px;">
<article class="col-3">
<h2><span>PLATFORM1</span></h2>
<p class="extra">First Platform answer</p>
</article>
</div>

<div id="faqplatform2" style="display:none; right: 200px;">
<article class="col-3">
<h2><span>PLATFORM2</span></h2>
<p class="extra">Second Platform answer</p>
</article>
</div>

<!-- JURISDICTION HERE -->
<div id="faqjurisdiction1" style="display:none; right: 200px;">
<article class="col-3">
<h2><span>JURISDICTION1</span></h2>
<p class="extra">First Jurisdiction answer</p>
</article>
</div>

<div id="faqjurisdiction2" style="display:none; right: 200px;">
<article class="col-3">
<h2><span>JURISDICTION2</span></h2>
<p class="extra">Second Jurisdiction answer</p>
</article>
</div>

<!-- FORMATION HERE -->
<div id="faqformation1" style="display:none; right: 200px;">
<article class="col-3">
<h2><span>FORMATION1</span></h2>
<p class="extra">First Formation answer</p>
</article>
</div>

<div id="faqformation2" style="display:none; right: 200px;">
<article class="col-3">
<h2><span>FORMATION2</span></h2>
<p class="extra">Second Formation answer</p>
</article>
</div>


</div>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
</body>


Any advice would be appreciated

thanks in advance

ddadmin
09-26-2011, 04:51 AM
Please post a link to the page on your site that contains the problematic script so we can check it out. It makes it a lot easier to test out the problem.

Foundas
09-26-2011, 08:47 PM
I sorted it out by using Demo#1 as base for the nested tabs

thank you