There are several notes about using this effect:
- This has been tested in IE6 and FF2 and Word output.
- This setup requires you to manually modify the stylesheet file and the topic file that will contain the effect. Backup the topic file before trying to implement it, just in case something goes wrong.
- This effect is not the toggler effect, so setting styles for the togglers won't do anything to this output. You can create custom classes if you want to modify how the hyperlinks appear. For this example, the default hyperlink style in the project will be used.
- There are no icons (arrows) next to the hyperlinked text like there are for togglers, so if you want those icons, you'll have to add them manually.
- If you want to get fancier with the layout of the text that appears/hides, be aware that Word (and perhaps Framemaker) ignores DIV tags, so if you try to have text appear next to each other instead of occupying the same space, then the print output won't maintain the position of the text. So test the effect in print output. If it doesn't appear the way you want, then I recommend you put the text to be hidden/revealed in separate snippet files, then create two topic files -- one for online output with the more advanced layout and one for print that will be a static layout. Then apply an online-only condition to the online topic and a print-only condition to the print topic. Both topics contain the snippet text so you still only need to go to one place to change the text.
In order for this to work, you create DIV tags with absolute positioning. Each DIV tag contains content (text, images, whatever). Each DIV tag starts out hidden. When you click on the corresponding hyperlink, the DIV tag's visibility is turned on and the visibility for all other DIV tags is turned off. Each DIV tag is named so that you can associate a DIV tag to hyperlinked text. The name for the DIV tags are specified in the stylesheet file. You could specify the DIV settings in the topic file instead of the stylesheet, but the benefit of putting them in the stylesheet is that you can reuse the same DIV names across multiple topics.
Modification to the Stylesheet File
Right-click on the stylesheet file and select Open with > Internal Text Editor. Copy-and-paste the code below into the stylesheet, making sure that you DON'T paste the code into the print media section of the stylesheet. (If you go to the very bottom of the file you should be fine).
The code you're inserting is the name of the DIVs and indicating that they should be positioned absolutely and that they should start out as being hidden. You can name the DIVs anything you want -- just make sure to use the same names in the topic. If you need more than 3 DIVs, then create another DIV, name it, and give it the same settings as the others. Save the stylesheet after pasting the code in.
Code: Select all
#line1 {
position:absolute;
visibility: hidden;
}
#line2 {
position:absolute;
visibility: hidden;
}
#line3 {
position:absolute;
visibility: hidden;
}
Right-click on the topic file and select Open with > Internal Text Editor. Copy-and-paste the code below in between the <head> and </head> tags. This code is generated by Dreamweaver to get the show/hide effect to work and should not be modified in any way.
Code: Select all
<script type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_showHideLayers() { //v6.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}
//-->
</script>
With the topic file still open in the Internal Text Editor, copy-and-paste the following lines into the <body> section where you want the hyperlinks to appear. You don't have to use <p> tags -- you can use a list for the hyperlinks. The main thing is the code that appears in the <a> tag for the hyperlinks. The # is basically a null hyperlink (i.e., no destination) and the onClick code is what triggers the corresponding DIV to appear and all other DIVs to hide.
Couple of notes about this:
- If you have more or less than 3 DIVs that will be hidden/shown in the topic, then you need to modify the onClick event for each hyperlink in order to include/exclude the necessary DIVs. The code is a bit tricky so make sure you follow the pattern when adding or removing DIVs. Not that each line has only one DIV set to "show" and all others set to "hide".
- The conditional properties shown are to hide the hyperlinks when generating print output. If you don't hide the hyperlinks then you'll get errors in the Word output (don't know what Framemaker will do). The errors will be something like "Error! Failed to resolve hyperlink" or something like that. So conditionalize the text to prevent the errors from occurring in print output.
Code: Select all
<p MadCap:conditions="Default.ScreenOnly"><a href="#" onclick="MM_showHideLayers('line1','','show','line2','','hide','line3','','hide')">Link to show/hide 1</a></p>
<p MadCap:conditions="Default.ScreenOnly"><a href="#" onclick="MM_showHideLayers('line1','','hide','line2','','show','line3','','hide')">Link to show/hide 2</a></p>
<p MadCap:conditions="Default.ScreenOnly"><a href="#" onclick="MM_showHideLayers('line1','','hide','line2','','hide','line3','','show')">Link to show/hide 3</a></p>
With the topic still open in the Internal Text Editor, copy-and-paste the code below into the <body> section where you want the content to appear/disappear. Because the DIVs are positioned absolutely, they'll be displayed where they're positioned, so if you have three blank lines before the DIVs, then you'll have three blank lines before the content appears. However, because the DIVs are hidden/shown in turn, it will appear as though the DIVs are positioned in the same spot when you run the output.
Again, if you need more or less DIVs, then follow the same setup when adding or removing the DIVs. Also, in this example, the first two DIVs are pulling the content from snippet files. The last DIV contains the actual text.
NOTE: You can modify the contents in the DIV from the normal XML Editor view of the topic, instead of modifying the contents of the DIVs from within the Internal Text Editor. But it might be easier if you at least set up the framework in the Internal Text Editor, then switch to the normal view to refine the contents.
Code to insert where the content should appear:
Code: Select all
<div id="line1"><MadCap:snippetText src="Resources/Snippets/snipLine1.flsnp" /></div>
<div id="line2"><MadCap:snippetText src="Resources/Snippets/snipLine2.flsnp" /></div>
<div id="line3">
<p>This DIV contains the text, images, etc. that will appear when the third hyperlink is clicked.</p>
</div>