{"id":496,"date":"2013-06-11T01:13:17","date_gmt":"2013-06-11T01:13:17","guid":{"rendered":"http:\/\/tregner.com\/flare-blog\/?p=496"},"modified":"2013-06-11T01:13:17","modified_gmt":"2013-06-11T01:13:17","slug":"show-and-hide-with-jquery-in-html5-output","status":"publish","type":"post","link":"https:\/\/tregner.com\/flare-blog\/show-and-hide-with-jquery-in-html5-output\/","title":{"rendered":"Show and Hide with jQuery in HTML5 Output"},"content":{"rendered":"

MadCap Flare includes some show-and-hide controls for web-based outputs such as\u00a0Togglers<\/a>\u00a0and Expanding Text<\/a>. 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.<\/p>\n

Sliding show-and-hide actions are simple tasks with jQuery. Two such functions are\u00a0slideUp()<\/a>\u00a0and\u00a0slideDown()<\/a>. Here is a function which uses both functions to show and hide an element given the element’s id attribute value.<\/p>\n

function slideContent(id) {\r\n    if ($('#' + id).css('display') == 'none') {\r\n        $('#' + id).slideDown('slow', function () { });\r\n    }\r\n    else {\r\n        $('#' + id).slideUp('slow', function () { });\r\n    }\r\n}<\/pre>\n
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.<\/p>\n
\"insert-script\"<\/a><\/p>\n
With the Attributes Window in Flare<\/a>, 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.<\/p>\n
\"id-attribute\"<\/a><\/p>\n
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:<\/p>\n
slideContent('show-hide')<\/pre>\n
\"onclick-attribute\"<\/a><\/p>\n
The final markup for the topic looks like this:<\/p>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<html xmlns:MadCap=\"http:\/\/www.madcapsoftware.com\/Schemas\/MadCap.xsd\" MadCap:lastBlockDepth=\"2\" MadCap:lastHeight=\"174\" MadCap:lastWidth=\"242\">\r\n    <head>\r\n        <link href=\"Resources\/Stylesheets\/Styles.css\" rel=\"stylesheet\" type=\"text\/css\" \/>\r\n    <\/head>\r\n    <body>\r\n        <h1>Topic Title<\/h1>\r\n        <p>\r\n            <script type=\"text\/javascript\">\/*<![CDATA[*\/function slideContent(id) {\r\n    if ($('#' + id).css('display') == 'none') {\r\n        $('#' + id).slideDown('slow', function () { });\r\n    }\r\n    else {\r\n        $('#' + id).slideUp('slow', function () { });\r\n    }\r\n}\/*]]>*\/<\/script>\r\n        <\/p>\r\n        <p onclick=\"slideContent('show-hide')\">Expand\/Collapse<\/p>\r\n        <p id=\"show-hide\" class=\"space\">Delete this text and replace it with your own content.<\/p>\r\n    <\/body>\r\n<\/html><\/pre>\n
When the target is built and the output is opened, the click behavior looks like this:<\/p>\n
expand-collapse<\/a><\/p>\n
Other relevant concepts:<\/p>\n