Expanding a Group of Togglers

This forum is for all Flare related Tips and Tricks.
Have a tip or trick you use while working in Flare? Share it here.
Post Reply
jmenning
Propeller Head
Posts: 50
Joined: Thu Jul 20, 2006 2:52 pm

Expanding a Group of Togglers

Post by jmenning »

For better or worse, my documentation makes heavy use of togglers. One of the things I've struggled with is making it fast to find the specific information you're looking for, but not requiring you to click a bazillion links if you just want to browse through the information.

So I set out on a quest to to toggle all the togglers in a section of the page - not the whole page, just one part of it.

I've got some basic functionality, now, so I thought I'd share.
  • I created a new class - MadCap | toggler.ExpandAll (MCToggler_ExpandAll in the output)
  • In the topic, I put all the togglers in a section together in a div.
  • In the same div, I created an "Expand All in This Section" toggler, and set the class to MadCap|toggler.ExpandAll.
  • With some help from a co-worker, I modified the MadCapEffects.js file to check for the MCToggler_ExpandAll style and call a customized ExpandAll function (code for both below).
Here's the code I added to the FMCToggler function, including some of the surrounding code so you can see where I put it:

Code: Select all

function FMCToggler( node )
{
    // Don't continue if something is already popped up
    
    if ( gPopupObj )
    {
        return;
    }
    
       // BEGINNING OF MY INSERTED CODE

      // check for ExpandAll class, send to JMExpandSection if found
	
	var checkClass = node.className;
		
	if ( checkClass == "MCToggler_ExpandAll" )
	{
		JMExpandSection( node );
		return;
	}

    // END OF MY INSERTED CODE

    // Toggle the icon
    
    var imgNodes    = node.getElementsByTagName( "img" );
And here's the customized version of the FMCExpandAll function. Basically, it just rolls through everything in the div, finds the togglers, and expands them.

Code: Select all

// Jill's version of the Expand All 

function JMExpandSection( node )
{
	var swapType = "open";
	var nodes   = FMCGetElementsByAttribute( node.parentNode.parentNode, "MadCap:targetName", "*" );
    for ( var i = 0; i < nodes.length; i++ )
    {
        nodes[i].style.display = (swapType == "open") ? "" : "none";
    }
    nodes = FMCGetElementsByClassRoot( node.parentNode.parentNode, "MCTogglerIcon" );
    
    for ( var i = 0; i < nodes.length; i++ )
    {
        FMCImageSwap( nodes[i], swapType );
    }
    
    nodes = FMCGetElementsByClassRoot( node.parentNode.parentNode, "MCExpandingBody" );
    
    for ( var i = 0; i < nodes.length; i++ )
    {
        nodes[i].style.display = (swapType == "open") ? "" : "none";
    }
    
    nodes = FMCGetElementsByClassRoot( node.parentNode.parentNode, "MCExpandingIcon" );
    
    for ( var i = 0; i < nodes.length; i++ )
    {
        FMCImageSwap( nodes[i], swapType );
    }
    
    nodes = FMCGetElementsByClassRoot( node.parentNode.parentNode, "MCDropDownBody" );
    
    for ( var i = 0; i < nodes.length; i++ )
    {
        nodes[i].style.display = (swapType == "open") ? "" : "none";
    }
    
    nodes = FMCGetElementsByClassRoot( node.parentNode.parentNode, "MCDropDownIcon" );
    
    for ( var i = 0; i < nodes.length; i++ )
    {
        FMCImageSwap( nodes[i], swapType );
    }
}
Benefits and Limitations

The main benefit is that I can expand a whole group of togglers, including switching the icons, without having to do a lot of manual editing in the help file (I don't, for example, have to insert code into each topic using a text editor). All I have to do is create the div, create the toggler, and set the toggler style. The rest happens automagically.

This will only work, as written, if the toggler (which is <a> in the output) is exactly two steps away from the container all the togglers are in. So, <div><p><a> works, and <ul><li><a> (for all togglers in an unordered list) should work, but <div><ul><li><a> won't work.

Currently, it's only an Expand function - it's not really acting as a toggler. The next step is to write code to swap the text to say "Collapse All in This Section" and collapse the section again. For another day :D
LTinker68
Master Propellus Maximus
Posts: 7247
Joined: Thu Feb 16, 2006 9:38 pm

Re: Expanding a Group of Togglers

Post by LTinker68 »

jmenning wrote:So I set out on a quest to to toggle all the togglers in a section of the page - not the whole page, just one part of it.
Why not just call all the named elements in the "expand all" toggler?

I have some topics that have 15 steps in a process, for example. Ten of those steps have a "View the screenshot" toggler at the end of the step so that the user can see the screenshot just for that step and none of the others. If, however, the user would like to see all the screenshots, there is a "View all screenshots" at the top of the topic that will reveal all the screenshots at once. It's no different from the other togglers except in regards to how many named elements it's showing or hiding. The drawback, of course, is that if a user has expanded one of the single togglers, then clicking the reveal all toggler will hide the single screenshot while revealing all the others. I didn't look through your code, so maybe your code takes care of that.
Image

Lisa
Eagles may soar, but weasels aren't sucked into jet engines.
Warning! Loose nut behind the keyboard.
jmenning
Propeller Head
Posts: 50
Joined: Thu Jul 20, 2006 2:52 pm

Re: Expanding a Group of Togglers

Post by jmenning »

If I set the Expand All toggler to call all of the named elements, that works - sort of.

Two issues:

It toggles all the elements. So, it closes the open ones and opens the closed ones.

It also doesn't change the icon - so the lower togglers still look like they can be opened.

Having two togglers operating a single element is like having two light switches attached to the same light fixture. There's no way to see, looking at the switch, whether the light has power or not.

I introduced Toggle All togglers, and thought they were great. I'm hearing back from my users that they get confused, because they rely on the icon to tell them whether there's more information available.

What this method allows me to do is expand all the togglers and set their icons, so it doesn't matter if you've been opening and closing them individually - you always know what that link will do.
justnef
Jr. Propeller Head
Posts: 5
Joined: Tue Dec 06, 2011 12:16 pm

Re: Expanding a Group of Togglers

Post by justnef »

I think this is exactly the topic I was looking for and am hoping anyone can help me.

I'm tasked with responsibility of revamping our entire online help database so that the content is presented to our users with toggles as well we jump text. The intended goal is to have all the toggles open on page load, with the hyperlinks to jump through the topic visible to the user. We'd also like to have an Expand All/Collapse All link on the page for the users to have the option to simply use the jump text through the topic, or collapse all and use individual toggles to expand the desired content. Each topic contains a minimum of six (6) toggles.

We're coming across an issue that has already been described in this thread: i have an Expand All toggle controlling each of individually controlled toggles, resulting in confusing performance on the user end. I should state that I have no formal training in HTML, let alone CSS, or any other light coding training that may be required to properly set this up, so I may not have explained everything correctly, or I may just be doing something wrong. But I'm a quick study and interested in anything that would make this feature work properly. Any help anyone could offer would be greatly appreciated.

Maybe a sample of the code I am using could help:

Code: Select all

<body onLoad="openTogglers()">
        <MadCap:breadcrumbsProxy class="H1" style="font-size: 9pt;" />
        <h1><a name="top"></a>Sample Topic with Toggles</h1>
        <p>This is the introductory paragraph. It provides a general overview of the topic...</p>
        <table style="width: 97%;border-collapse: collapse;border-left-style: none;border-left-width: 0px;border-right-style: none;border-right-width: 0px;border-top-style: none;border-top-width: 0px;border-bottom-style: none;border-bottom-width: 0px;">
            <col />
            <col />
            <tbody>
                <tr>
                    <td>
                        <h6>
                            <MadCap:toggler targets="tAll">[Collapse All/Expand All]</MadCap:toggler>
                        </h6>
                    </td>
                    <td> </td>
                </tr>
                <tr>
                    <td> </td>
                    <td> </td>
                </tr>
                <tr>
                    <td><span MadCap:targetName="tAll"><ul style="list-style-type: square;"><li style="text-align: left;"><a href="#Editing">Editing Sample Topic</a></li><li style="text-align: left;"><a href="#FAQs">FAQs: Sample Topic</a></li><li style="text-align: left;"><a href="#Best">Best Practices: Sample Topic</a></li><li style="text-align: left;"><a href="#State">State Reference Materials</a></li><li style="text-align: left;"><a href="#Periodic">Periodic Activities: Sample Topic</a></li><li style="text-align: left;"><a href="#Related">Related Sections/Screens</a></li></ul></span>
                    </td>
                    <td> </td>
                </tr>
            </tbody>
        </table>
        <h5><a name="Editing"></a>
            <MadCap:toggler targets="t1">Editing Sample Topic - Software Mechanics</MadCap:toggler>
        </h5><span MadCap:targetName="tAll"><span MadCap:targetName="t1"><h6><a href="#top">[back to top]</a></h6><p>Sample text for Editing the Sample Topic...</p><h6><a href="#top">[back to top]</a></h6></span></span>
        <h5><a name="FAQs"></a>
            <MadCap:toggler targets="t2">FAQs: Sample Topic</MadCap:toggler>
        </h5><span MadCap:targetName="tAll"><span MadCap:targetName="t2"><p style="font-style: italic;">Question: Why am I required to enter a rationale, for this sample topic?</p><p>Answer: sample topic FAQ answer...</p><h6><a href="#top">[back to top]</a></h6></span></span>
        <h5><a name="Best"></a>
            <MadCap:toggler targets="t3">Best Practices: Sample Topic</MadCap:toggler>
        </h5><span MadCap:targetName="tAll"><span MadCap:targetName="t3"><p style="font-size: 10pt;font-weight: bold;">Sample Topic Best Practices Documentation...</p><h6><a href="#top">[back to top]</a></h6></span></span>
        <h5><a name="State"></a>
            <MadCap:toggler targets="t4">State Reference Materials</MadCap:toggler>
        </h5><span MadCap:targetName="tAll"><span MadCap:targetName="t4"><p style="font-size: 10pt;font-weight: bold;">Sample topic State Reference Materials</p><h6><a href="#top">[back to top]</a></h6></span></span>
        <h5><a name="Periodic"></a>
            <MadCap:toggler targets="t5">Periodic Activities: Sample Topic</MadCap:toggler>
        </h5><span MadCap:targetName="tAll"><span MadCap:targetName="t5"><ul style="list-style-type: square;"><li>null...</li></ul><h6><a href="#top">[back to top]</a></h6></span></span>
        <h5><a name="Related"></a>
            <MadCap:toggler targets="t6">Related Sections/Screens</MadCap:toggler>
        </h5><span MadCap:targetName="tAll"><span MadCap:targetName="t6"><ul style="list-style-type: square;"><li>Related Sample Topic 1...</li><li>Related Sample Topic 2</li></ul><h6><a href="#top">[back to top]</a></h6></span></span>
        <MadCap:breadcrumbsProxy class="H1" style="font-size: 9pt;" />
        <script>
			function openTogglers() {
			///*<![CDATA[*/
			for (i=0;i<document.links.length;i++) {
			if (document.links[i].className == 'MCToggler') document.links[i].click();
			} } ///*]]>*/</script>
    </body>
Thanks so much in advance! :D
yonatanlehman
Propeller Head
Posts: 51
Joined: Mon Sep 18, 2017 6:14 am

Re: Expanding a Group of Togglers

Post by yonatanlehman »

9 years later, I have the same problem but I'm delighted to see that Madcap have provided a proper solution. It even works ;-)
see
https://help.madcapsoftware.com/flare20 ... gglers.htm
Post Reply