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/dynamici...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:

Code:

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

BODY:

Code:

<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

Thread: Tab Content script with nested tabs issue

Thread Tools

Search Thread

Tab Content script with nested tabs issue

Bookmarks

Bookmarks

Posting Permissions