Add a close link to dropdowns and togglers (HTML5)

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
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Add a close link to dropdowns and togglers (HTML5)

Post by NorthEast »

I've written a script that automatically adds a 'close' link to dropdowns and togglers in HTML5 targets.
DropDown Toggler.png
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.

Code: Select all

$(document).ready(function(){
 
        /* Add close button to dropdowns */
        $(".dropDownBody").append("<a href='javascript:void(0);' class='dropDownClose'>(Close)</a>");
        $(".dropDownClose").click(function() {
            $(this).parent().prev(".dropDownHead").children(".dropDownHotspot").click();
        });
 
        /* 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>");
                $(this).append(closeTarget);
 
                /* 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) */
                $(closeTarget).click(function(){
                    $(closeToggler).click();
                });
        });
 
});
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:

Code: Select all

<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.

Code: Select all

a.dropDownClose,
a.togglerClose
{
    display: block;
}
Bog post: ukauthor.wordpress.com/2016/09/27/add-a-close-link-to-togglers-and-dropdowns-html5/
You do not have the required permissions to view the files attached to this post.
ChoccieMuffin
Senior Propellus Maximus
Posts: 2630
Joined: Wed Apr 14, 2010 8:01 am
Location: Surrey, UK

Re: Add a close link to dropdowns and togglers (HTML5)

Post by ChoccieMuffin »

Dave Lee wrote:I've written a script that automatically adds a 'close' link to dropdowns and togglers in HTML5 targets.
Do you know if this also works for HTMLHelp targets? It looks really cool but I don't want to go messing about with my projects if it doesn't work.

Cheers. :)
Started as a newbie with Flare 6.1, now using Flare 2023.
Report bugs at http://www.madcapsoftware.com/bugs/submit.aspx.
Request features at https://www.madcapsoftware.com/feedback ... quest.aspx
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Add a close link to dropdowns and togglers (HTML5)

Post by NorthEast »

ChoccieMuffin wrote:Do you know if this also works for HTMLHelp targets? It looks really cool but I don't want to go messing about with my projects if it doesn't work.

Cheers. :)
Sorry, it's only for HTML5 targets, as HTML Help and WebHelp targets use different code for dropdowns and togglers.

Always mess around with a test project - never add dodgy code from the internet to real projects!
Post Reply