Results 1 to 3 of 3

Thread: Tab Content script with nested tabs issue

  1. #1
    Join Date
    Nov 2007
    Posts
    63
    Thanks
    15
    Thanked 0 Times in 0 Posts

    Default Tab Content script with nested tabs issue

    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

  2. #2
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    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.
    DD Admin

  3. #3
    Join Date
    Nov 2007
    Posts
    63
    Thanks
    15
    Thanked 0 Times in 0 Posts

    Default

    I sorted it out by using Demo#1 as base for the nested tabs

    thank you

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •