Complex Toggling

justnef · Post by **justnef** » Thu Dec 15, 2011 2:23 pm

Initially I posted this as a reply to an existing post, but that post was from 2009. I'm hoping that as a new post it may get some visibility to someone who can help. Thanks in advance!

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>

i-tietz · Post by **i-tietz** » Tue Dec 27, 2011 4:20 am

justnef wrote:
Code: Select all
<body onLoad="openTogglers()">

This works? Last time I looked Flare deleted the onload parameter of the body ...

justnef wrote:

Code: Select all

if (document.links[i].className == 'MCToggler') document.links[i].click();

I suppose the behaviour the user sees is that if a few togglers are open and the others are closed clicking on the "Open All" simply closes the open togglers and opens the closed togglers instead of opening them all?
At least that is the behaviour that I would expect fom that line of code: What this javascript does is performing a click on the link - and if you click on an open toggler link it closes the toggler ...

Try this:
Insert a topic toolbar with "open all" and "close all" buttons. You can see the appropriate function call in the source code of the built help. Use that function call for your javascript.

Post by **LTinker68** » Thu Dec 29, 2011 7:13 pm

i-tietz wrote:
justnef wrote:
Code: Select all
<body onLoad="openTogglers()">
This works? Last time I looked Flare deleted the onload parameter of the body ...

Not if it's in the body tag of the masterpage, I don't think.

Post by **NorthEast** » Fri Dec 30, 2011 2:10 am

LTinker68 wrote:
i-tietz wrote:
justnef wrote:
Code: Select all
<body onLoad="openTogglers()">
This works? Last time I looked Flare deleted the onload parameter of the body ...
Not if it's in the body tag of the masterpage, I don't think.

Yep, it depends if you use a master page.
If you use a master page, then the topic's body tag will be replaced by the body tag from the master page.
If you don't use a master page, then the topic's body tag should remain unaltered.

justnef · Post by **justnef** » Wed Jan 04, 2012 7:02 am

Thank you all for your feedback and support. I've used the advice of i-tietz and used the expand/collapse all topic toolbar buttons within my topics. A crucial part of the design is that the toggles are open upon load, so to continue to utilize that feature, I am not using a Master Page. Thanks again!

i-tietz · Post by **i-tietz** » Wed Jan 04, 2012 7:13 am

No need to give up the masterpage - you can use this in the head of the masterpage without problems:

Code: Select all

<head>
...
<script type="text/javascript">
            <!--
window.onload =ExpandAll("open");
// -->
        </script>
...
</head>

justnef · Post by **justnef** » Wed Jan 04, 2012 8:57 am

i-tietz wrote:No need to give up the masterpage - you can use this in the head of the masterpage without problems:
Code: Select all
<head>
...
<script type="text/javascript">
            
        </script>
...
</head>

I tried this but it did not work. Do I need to have some other code in each of the topics for this function to work properly? I really do like the idea of using a Master Page as many of the pages have this same format, but it doesn't seem to like the idea of my topics very much.

i-tietz · Post by **i-tietz** » Wed Jan 04, 2012 9:55 am

sigh ... aftermath from New Year's party ... I'm not yet fit yet, it seems ...

Here is a topic that contains a glossary proxy (only for Internet Explorer, i.e.: HTML Help):

Code: Select all

<head>
...
<script type="text/javascript">
            <!--
window.onload = AllItems("open");

		function AllItems(movement)
		{
		if (document.all)
		{

		var maximum = document.all.tags("div").length;
		var counter= 0;
		for (var counter=0;counter<maximum;counter++)
		{
		if (document.all.tags("div")[counter].className == "GlossaryPageDefinition")
		{
			if (document.all.tags("div")[counter].style.setAttribute)
			{
			if (movement == "open")
			{ document.all.tags("div")[counter].style.setAttribute("display", "block"); }
			if (movement == "close")
			{ document.all.tags("div")[counter].style.setAttribute("display", "none"); }
			}
		}
		}
		}
		}
		Norm1 = new Image();
		Norm1.src = "../images/tb_open1.png";     /* Standard pic */
		High1 = new Image();
		High1.src = "../images/tb_open2.png"; /* Highlighted pic*/

		Norm2 = new Image();
		Norm2.src = "../images/tb_close1.png";     /* second Standard pic*/
		High2 = new Image();
		High2.src = "../images/tb_close2.png"; /* second Highlighted pic*/

		function PicChange (Picnr, PicObject) {
		window.document.images[Picnr].src = PicObject.src;
		}

		// -->
        </script>
...
</head>

<body>
...
<a href="javascript:void(0);" onclick="javascript:AllItems('open');return false;" onmouseover="PicChange(0, High1)" onmouseout="PicChange(0, Norm1)"><img src="../images/tb_open1.png" title="Open all glossary items" style="margin: 2px;" /></a>
<a href="javascript:void(0);" onclick="javascript:AllItems('close');return false;" onmouseover="PicChange(1, High2)" onmouseout="PicChange(1, Norm2)"><img src="../images/tb_close1.png" title="Close all glossary items" style="margin: 2px;" /></a>
...
</body>

You would have to replace "GlossaryPageDefinition" with whatever class is used for the heads of togglers ... (I don't have togglers, so I don't know)

justnef · Post by **justnef** » Wed Jan 04, 2012 12:51 pm

Even in the aftermath of the NYE party, your skillset here far exceeds my own. I honestly don't know how to use the code you provided. I have bookmarked it, though, to come back to it later. Even though it would be ideal to not have to manually input the code into each of the topics, I have a fast approaching deadline to have the overall project completed with the desired functionality. Without the Master Page, using the tips you originally gave seems to work for now. I sincerely cannot thank you enough for your help.

i-tietz wrote:sigh ... aftermath from New Year's party ... I'm not yet fit yet, it seems ...

Here is a topic that contains a glossary proxy (only for Internet Explorer, i.e.: HTML Help):

Code: Select all

<head>
...
<script type="text/javascript">
            <!--
window.onload = AllItems("open");

		function AllItems(movement)
		{
		if (document.all)
		{

		var maximum = document.all.tags("div").length;
		var counter= 0;
		for (var counter=0;counter<maximum;counter++)
		{
		if (document.all.tags("div")[counter].className == "GlossaryPageDefinition")
		{
			if (document.all.tags("div")[counter].style.setAttribute)
			{
			if (movement == "open")
			{ document.all.tags("div")[counter].style.setAttribute("display", "block"); }
			if (movement == "close")
			{ document.all.tags("div")[counter].style.setAttribute("display", "none"); }
			}
		}
		}
		}
		}
		Norm1 = new Image();
		Norm1.src = "../images/tb_open1.png";     /* Standard pic */
		High1 = new Image();
		High1.src = "../images/tb_open2.png"; /* Highlighted pic*/

		Norm2 = new Image();
		Norm2.src = "../images/tb_close1.png";     /* second Standard pic*/
		High2 = new Image();
		High2.src = "../images/tb_close2.png"; /* second Highlighted pic*/

		function PicChange (Picnr, PicObject) {
		window.document.images[Picnr].src = PicObject.src;
		}

		// -->
        </script>
...
</head>

<body>
...
<a href="javascript:void(0);" onclick="javascript:AllItems('open');return false;" onmouseover="PicChange(0, High1)" onmouseout="PicChange(0, Norm1)"><img src="../images/tb_open1.png" title="Open all glossary items" style="margin: 2px;" /></a>
<a href="javascript:void(0);" onclick="javascript:AllItems('close');return false;" onmouseover="PicChange(1, High2)" onmouseout="PicChange(1, Norm2)"><img src="../images/tb_close1.png" title="Close all glossary items" style="margin: 2px;" /></a>
...
</body>

You would have to replace "GlossaryPageDefinition" with whatever class is used for the heads of togglers ... (I don't have togglers, so I don't know)

MadCap Software Forums

Complex Toggling

Complex Toggling

Re: Complex Toggling

Re: Complex Toggling

Re: Complex Toggling

Re: Complex Toggling

Re: Complex Toggling

Re: Complex Toggling

Re: Complex Toggling

Re: Complex Toggling