Dave Lee – A flair for Flare

My blog about MadCap Flare and web design

Add a ‘close’ link to togglers and dropdowns (HTML5)


I’ve written a script that will add a ‘close’ link to the bottom of dropdowns and togglers.

This will work with HTML5 targets in Flare.


To use this in your own Flare project, first copy and paste the following code into a text file, and save it with a *.js extension; e.g. dd_toggler_links.js.

	/* Add close button to dropdowns */
	$(".dropDownBody").append("<a href='javascript:void(0);' class='dropDownClose'>Close</a>");
	$(".dropDownClose").click(function() {
	/* Add close button to togglers */
	$("[data-mc-target-name]").each(function() {
		/* for each toggler target, find the target name (togglerTarget) */
		var togglerTarget = $(this).attr("data-mc-target-name");
		/* for each toggler target, add a close link (a.togglerClose) */
		var closeTarget = $("<a href='javascript:void(0);' class='togglerClose'>Close</a>");
		/* Create a selector for the toggler link (closeToggler), which is linked to this target. Look for open togglers, which include the togglerTarget name */
		var closeToggler = 'a.toggler[data-mc-state="open"][data-mc-targets*="' + togglerTarget + '"]';
		/* When the closeTarget link is clicked, clik the toggler link (closeToggler) */

Add the javascript file to your project, and add a script link to this file from your master page; e.g. in the head section you would include something like:

<script src="../Scripts/dd_toggler_links.js"></script>

The last part is to style the links, which use the class names a.closeDropDown and a.closeToggler. Add the following CSS to your stylesheet, and include any other properties, such as a colour or background icon.

    display: block;



5 thoughts on “Add a ‘close’ link to togglers and dropdowns (HTML5)

  1. Great idea. Can really improve usability in some cases.

  2. I need a script to make sure the Server-based Output option is not selected in the target when I publish. MadCap said I can put a script into the Comments field of the Target to accomplish this. Do you know how I can build this type of script?

    • Hi, I don’t quite understand the question, or what MadCap meant by their answer. I know you can tell Flare targets to run scripts or batch files on the ‘Build Events’ tab, perhaps they meant that.

      Try putting this question on the MadCap forums with a bit more detail.


  3. Very nice, Dave. Just implemented this. Thanks.

  4. Great tip. Many thanks for sharing.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s