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).
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" );
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 );
}
}
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