Tabs in Side-Nav Output Don't Open from TOC

[YE-TW]

Hi,

I'm using tabs from https://www.madcapsoftware.com/blog/add ... Flare,over)%20the%20content's%20corresponding%20tab. (Thank you, Laura Charles Johnson!)
They work correctly, but I can't get the TOC nodes to work. It's as if they don't recognize the H2s in the tabbed divs. If pull the H2s out of the div container the TOC links work, but the content is displayed in every tag.

Here is my topic content:

Code: Select all

...
<ul class="tabs">
            <li class="tab-link current" data-tab="tab-1" MadCap:autonum="<b />"><a name="tab1"></a>First tab</li>
            <li class="tab-link" data-tab="tab-2" MadCap:autonum="<b />"><a name="tab2"></a></a>Second tab</li>
            <li class="tab-link" data-tab="tab-3" MadCap:autonum="<b />"><a name="tab3"></a>3rd tab</li>
        </ul>
        <div class="tab-content current" id="tab-1">
            <h2><a name="Step1"></a><b>Step 1:</b> My First Tab</h2>
            <MadCap:snippetBlock src="../Resources/Snippets/MyFirstSnippet.flsnp" />
        </div>
        <div class="tab-content" id="tab-2">
            <h2><a name="Step2"></a><b>Step 2:</b> My Second Tab</h2>
            <MadCap:snippetBlock src="../Resources/Snippets/MySecondSnippet.flsnp" />
        </div>
        <div class="tab-content" id="tab-3">
            <h2><a name="Step3"></a><b>Step 3:</b> My Third Tab</h2>
            <MadCap:snippetBlock src="../Resources/Snippets/MyThirdSnippet.flsnp" />
        </div>

Here are my TOC entries:

Code: Select all

<?xml version="1.0" encoding="utf-8"?>
<CatapultToc
  Version="1">
  <TocEntry
    Title="New Book 1"
    Link="/Content/MyBook/test.htm">
    <TocEntry
      Title="Welcome to this page"
      Link="/Content/MyBook/test.htm" xmlns:MadCap="http://www.madcapsoftware.com/Schemas/MadCap.xsd" />
    <TocEntry
      Title="First Tab"
      Link="/Content/MyBook/test.htm#First" xmlns:MadCap="http://www.madcapsoftware.com/Schemas/MadCap.xsd" />
    <TocEntry
      Title="Second Tab"
      Link="/Content/MyBook/test.htm#Second" xmlns:MadCap="http://www.madcapsoftware.com/Schemas/MadCap.xsd" />
    <TocEntry
      Title="Third Tab"
      Link="/Content/MyBook/test.htm#Third" xmlns:MadCap="http://www.madcapsoftware.com/Schemas/MadCap.xsd" />    
  </TocEntry>
</CatapultToc>

This is the JS code:

Code: Select all

$(document).ready(function(){
	
	$('ul.tabs li').click(function(){
		var tab_id = $(this).attr('data-tab');

		$('ul.tabs li').removeClass('current');
		$('.tab-content').removeClass('current');

		$(this).addClass('current');
		$("#"+tab_id).addClass('current');
	})

})

Any ideas?

Best regards,
Yael

[YE-TW]

By the way, the same thing happens with tabber (http://www.barelyfitz.com/projects/tabber/).

[NorthEast]

They work correctly, but I can't get the TOC nodes to work. It's as if they don't recognize the H2s in the tabbed divs. If pull the H2s out of the div container the TOC links work, but the content is displayed in every tag.

I didn't understand your question.

What are "TOC nodes", and what are you trying to do that doesn't work?

[YE-TW]

Hi Dave,

TOC nodes are what's in the sidebar. They're the table of contents links. Maybe there's a better word for them?

In any case, I'm trying to click a TOC node/link/entry to open the relevant tab within a topic.

• If a TOC node links to a topic, then when you click the TOC node, that topic opens correctly.
• If a TOC node links to a bookmark in a topic, then when you click the TOC node, the heading (or whatever that bookmark points to) in that topic opens correctly.
• If a TOC node links to a heading/bookmark/tab ID in a div container for a tab, then, when you click the TOC node, absolutely nothing happens. This is true for all tabs, except for the one that is currently open, which works correctly.

So, for example, if I click "Third Tab", I want the content in the third tab to display - but, as you can see in the example, clicking "Third Tab" doesn't do anything. Whatever was open by default on the page - in this case, First Tab, remains displayed.

Maybe this is like the standard Flare search that doesn't find content that is in a dropdown/toggler/etc. on a page. Maybe Flare considers anything that is not explicitly displayed as non-existent? Is there any way to overcome this?

HTH-
Yael

[NorthEast]

Flare will automatically open things like drop downs and togglers, if you have a link to a bookmark inside them.
(BTW, MadCap's search does open dropdowns and togglers.)

However, you're using a custom control that's hiding content on your page, so Flare isn't going to know that it has to display the tab (or how to display it).
So it's not really a Flare problem - if you use custom controls, it's the custom control that needs to handle this.

What you're trying to do would work fine if you used dropdowns or togglers.

[YE-TW]

Yup. You're right. Not Flare's problem. I guess I need JavaScript help. I'll contact someone. Thanks, Dave.