Trick: Toggle Glossary Terms Popups

[MattyQ]

Hey, all,

I just wanted to share this little trick we're using in our help system for the popup version of the glossary terms. We really liked how they functioned (albeit we restyled ours fairly significantly), but found it not to be mobile friendly because they wouldn't open when tapped, since the function is hover-based. To work around that, I added a little CSS and Javascript to our projects to make the glossary popups toggle on and off.

Javascript:

Code: Select all

$( "a.glossaryTerm" ).click(function() {
    $( this ).toggleClass( "showPopup" );
    $( this ).children( "span.MCTextPopupBody" ).toggleClass( "showMe" );
});

CSS:

Code: Select all

span[class*=MCTextPopupBody][class*=showMe]
{
    display: block !important;
    opacity: 1 !important;
}

a[class*=glossaryTerm][class*=showPopup]
{
    background-image: url('../../../Skins/Default/Stylesheets/ExpandingOpen.gif') !important;
    padding-right: 17px !important;
}

You can add the script to each page where a glossary term occurs, or to a master page to use it across multiple topics. The CSS should go in whatever stylesheet the topic is using.

The image path provided in the showPopup class is to the default ExpandingOpen image. You should adjust this to whatever image you use to indicate the glossary popup is open. Additionally, a color property can be specified (e.g. "color: red;") in the showPopup class to give the glossary link a different color while it's open.

The basic result looks like the following:

d1Closed.png

And a result that's more fully styled:

d2Closed.png

Notably, you can then tap the popup or the link to close it.