Advanced Show/Hide Content Effect

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
LTinker68
Master Propellus Maximus
Posts: 7247
Joined: Thu Feb 16, 2006 9:38 pm

Advanced Show/Hide Content Effect

Post by LTinker68 »

In other threads in these forums, there were requests for ways to get a toggler to hide all other togglers when clicked, so that only one was visible at a time. The instructions below explain how to set up an alternative effect that is based on the show/hide layers functionality in Dreamweaver. It's a bit complicated. Sorry for the long thread.

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.
About the Process
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;
}
Modification to the Topic File (Header Section)
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>
Modification to the Topic File (Body Section - Hyperlinks)
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 to insert where hyperlinks should appear:

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>
Modification to the Topic File (Body Section - DIVs with Content)
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>
Save the topic file, close its view in the Internal Text Editor, then open the topic as normal in the XML Editor. You'll see your three hyperlinks and the three DIVs. Even though they're supposed to start out hidden, the XML Editor doesn't display them that way. You can click the Preview or build the output, then click on each hyperlink in turn to see the effect.
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: Advanced Show/Hide Content Effect

Post by jmenning »

Wow! Just... wow. Thanks for writing this up.

Looks like quite a bit of work to set it up. You gotta really want this to use it very often.

But of course I'm going to play with it anyway :lol:
Andrew
Propellus Maximus
Posts: 1237
Joined: Fri Feb 10, 2006 5:37 am

Re: Advanced Show/Hide Content Effect

Post by Andrew »

That is awesome Lisa! Thanks!!
Flare v6.1 | Capture 4.0.0
dasauerwald
Jr. Propeller Head
Posts: 2
Joined: Wed Jun 29, 2016 3:10 pm

Re: Advanced Show/Hide Content Effect

Post by dasauerwald »

This post is 8 years old, so I am wondering if someone has found an easier way to show only one toggler open at a time, or if this is still the only way to do it with Flare? Thanks.
ag543
Jr. Propeller Head
Posts: 1
Joined: Mon Feb 19, 2018 2:00 pm

Re: Advanced Show/Hide Content Effect

Post by ag543 »

I used jQuery to show one chunk of content at a time. When you click a link, its related content is shown, and the previously opened content is hidden. If you click the same link again, its related content is hidden.

The code uses the class name of the link's parent element to find the <div> with the same class name. You can use your own classes, but the following classes must also be used:
  • All: Add to each <div> so all the the content is shown or hidden.
  • Toggle: Add to each link so the previously opened content is closed.
  • Inactive or Active: Add to each link so the related content is shown or hidden. This also affects whether the link shows the closed or open background image (if set up in the stylesheet).
Disclaimer: I don't know jQuery or JavasScript at all, so this workaround is the result of googling and trial and error. Someone else may find a better way to do this.

Steps:
  1. Copy the following code, paste it into Notepad, and save it as a .js file.

    Code: Select all

    $(".Toggle").click(function(){
    		
    //Hide every div.All
    $('div.All').hide();
    
    //Variables for link and parent classes
    var $linkClass = $(this).attr('class');
    var $parentClass = $(this).parent().attr('class');
    
    if ($linkClass == "Toggle Inactive") {
    
    //Make all links inactive
    $(".Toggle").removeClass("Active");
    $(".Toggle").addClass("Inactive");
    
    //Make selected link active
    $(this).toggleClass("Inactive Active");
    
    //Display related content
    $('div.' + $parentClass).show();
    }
    else {
    
    //Make selected link inactive
    $(this).toggleClass("Active Inactive");
    
    //Hide related content
    $('div.' + $parentClass).hide();
    }
    
    });
  2. In the stylesheet, add the properties for .Toggle, .Active, and .Inactive.
    • Example:
      .Toggle
      {
      text-decoration: none;
      }
      .Active
      {
      background-image: url('../Images/Common/Toggler-Section-Open.png');
      background-repeat: no-repeat;
      background-position: left center;
      padding-left: 26px;
      }
      .Inactive
      {
      background-image: url('../Images/Common/Toggler-Section-Closed.png');
      background-repeat: no-repeat;
      background-position: left center;
      padding-left: 26px;
      }
  3. Set up the links.
    1. Enclose each link in a parent element.
      Example: <p><a>Link</a></p>
    2. Add the Toggle and Inactive classes to the links.
      Example: <p><a class="Toggle Inactive">Link</a></p>
    3. Add a different class to each link's parent.
      Example: <p class="Basics"><a class="Toggle Inactive">Link</a></p>
  4. Place the linked content in <div> tags, and add the All class and the same class as the link's parent.
    • Example:
      <div class="All Basics">
      <p>This is the linked content.</p>
      </div>
  5. To hide all the linked content when the topic opens, add the following code before the </body> tag:

    Code: Select all

    <script type="text/javascript">
    $(window).load(function(){ $('div.All').hide(); });
    </script>
  6. Add a link to the .js file before the </body> tag:

    Code: Select all

    <script type="text/javascript" src="../Folder-Containing-JS-File/JS-Filename.js">
    </script>
Example in the Text Editor:

Code: Select all

<body>
        <h1>Example</h1>
        <h2 class="A"><a class="Toggle Inactive">Section A</a>
        </h2>
        <div class="All A">
            <p>Content for Section A</p>
        </div>
        <hr />
        <h2 class="B"><a class="Toggle Inactive">Section B</a>
        </h2>
        <div class="All B">
            <p>Content for Section B</p>
        </div>
        <hr />
        <h2 class="C"><a class="Toggle Inactive">Section C</a>
        </h2>
        <div class="All C">
            <p>Content for Section C</p>
        </div>
        <hr />
        <script type="text/javascript">
			$(window).load(function(){ $('div.All').hide(); });
		</script>
        <script type="text/javascript" src="../Resources/Toggle-Content.js">
        </script>
    </body>
Riverglow
Jr. Propeller Head
Posts: 7
Joined: Fri Mar 20, 2020 2:09 pm

Re: Advanced Show/Hide Content Effect

Post by Riverglow »

I know this is an old thread, but ag543's solution worked almost perfectly for me. I imagine something changed over the years so that the code to hide all the divs when the page opened no longer worked like it should. However, I replaced it with this code and it works perfectly now:

Code: Select all

        <script type="text/javascript">
			$(document).ready(function(){

			$('[class^="All"]').hide();

			})
		</script>
Thanks so much for this idea! I'm using it with a slideshow/carousel so that users can browse through different products and choose the types of manuals they want to see and not get overwhelmed with having them all show up at once.
Post Reply