Show and Hide with jQuery in HTML5 Output

MadCap Flare includes some show-and-hide controls for web-based outputs such as Togglers and Expanding Text. This blog has explored some alternatives for show-and-hide in the context of condition tags. Here is another option which uses jQuery to expand and collapse an element with a sliding animation.

Sliding show-and-hide actions are simple tasks with jQuery. Two such functions are slideUp() and slideDown(). Here is a function which uses both functions to show and hide an element given the element’s id attribute value.

You can add this script to many places in a Flare project. For simplicity in this example, here is an image of the script inserted into a topic and then edited.

insert-script

With the Attributes Window in Flare, you can set the value for an attribute of an element highlighted in the XML Editor. You can also edit the markup directly with the Text Editor. For this example the element to show and hide is given the value ‘show-hide’ for the id attribute.

id-attribute

The element to click is given the following value for the onclick attribute to call the JavaScript function. The value for id is passed to the function:

onclick-attribute

The final markup for the topic looks like this:

When the target is built and the output is opened, the click behavior looks like this:

expand-collapse

Other relevant concepts:

 

5 thoughts on “Show and Hide with jQuery in HTML5 Output

  1. jeffam70

    Thomas, I just had a chance to watch your webinar on scripting in Flare’s HTML5 output and it led me to this page. I’m so glad that I watched; this script is the solution I’ve been looking for. I need to give our users the option of viewing content filtered live in one of three ways and I figured I could solve it with Javascript, but wasn’t able to figure out exactly how. Instead, I’ve been planning on delivering three different outputs… not optimal at all because it would mean a 2.5 x increase in size of the deliverables with our software. I think you just saved me. THANK YOU VERY MUCH!

    Reply
  2. Lee St.Onge

    Thanks – I did get this to play nice in my project! I am looking for a way to hide all elements (divs) of a specific class (rather than by id) on a single page. Can this code be modified to accomplish this?

    Reply
    1. Thomas Tregner Post author

      Sure. You can switch the id selector (#) to a class selector (.).

      function slideContent(styleClass) {
      if ($(‘.’ + styleClass).css(‘display’) == ‘none’) {
      $(‘.’ + styleClass).slideDown(‘slow’, function () { });
      }
      else {
      $(‘.’ + styleClass).slideUp(‘slow’, function () { });
      }
      }

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

HTML tags are not allowed.

200,002 Spambots Blocked by Simple Comments