Closing an Expandable Section

[crazycracka]

Hi,

I have a really long collapsible section (Expanded text). Its so long (Terms of Use) that to close it means the user has to scroll all the way back up. Is there a way to add a close button at the bottom of the section so it would collapse it?

Thanks in advance

[NorthEast]

I published an article about how to do this for dropdowns and togglers - although not expanding text.
https://ukauthor.wordpress.com/2016/09/ ... wns-html5/

[YE-TW]

Hi Dave,

I use your JS for closing dropdowns, and it works a charm. Thanks!!

For some reason though, I can't get it to work for togglers. Any ideas?

Here is my CSS for the "close" part:

Code: Select all

a.dropDownClose,
a.togglerClose
{
	display: block;
	font-size: 10pt;
	background: url('../Images/QSG/chevron-up-light-blue.png') no-repeat left 10px;
	text-decoration: none;
	text-indent: 1.65em;
	padding: 10px 0px 0px 16px;
}

a.dropDownClose:hover,
a.togglerClose:hover
{
	border-bottom-style: none;
	border-bottom-color: transparent;
	border-bottom-width: 0;
}

Here is my .js code:

Code: Select all

$(document).ready(function(){
 
				/* Add collapse button to dropdowns */
				$(".dropDownBody").append("<a href='javascript:void(0);' class='dropDownClose'>Collapse</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'>Collapse</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-target*="' + togglerTarget + '"]';
						/* When the closeTarget link is clicked, click the toggler link (closeToggler) */
						$(closeTarget).click(function(){
								$(closeToggler).click();
							});
					});
 
			});

Would appreciate any help. The "close" for dropdowns is absolutely fantastic. Thanks again!

Best regards,
Yael

[NorthEast]

Yeah, I can see the problem.

The js code you've got is missing some "$" characters from my original code.

This is caused by a bug in Flare's text editor, as it strips characters when you copy/paste.

Open the file in notepad (or any text editor outside of Flare), and copy/paste the original code again.

Once you've done that, report the bug to MadCap, as it's been around for years and needs to get fixed!

[Paul Griffiths]

Hi Dave

Useful stuff as always.

In what (may be) a related problem, I'm thinking of adding code that will automatically expand the first toggler in a topic when that topic opens. Can this be done, do you think? (Not asking you to code it - just want to get your take on whether it's possible before I waste time trying.)

Cheers, Paul

[NorthEast]

Yep - I think the following jQuery should work:

Code: Select all

$(document).ready(function() {
	$("ul.navigation").on("loaded", function () { 
		$("a.toggler").first().click();				
	});
});

1) Waits for document to load.
2) Waits for Flare's navigation menu { ul.navigation } to load. This is a bit of a hack, as you need to wait for Flare's scripts to finish before togglers will start working. There isn't a hook for that, but Flare does provide a hook for its menu to finish loading.
3) Looks for togglers { $("a.toggler") }, picks the first one { .first.() }, then clicks it { .click() }

[Paul Griffiths]

I'm speechless! You've gone above and beyond. Thank you so much, I'll give it a try.

UPDATE: Works perfectly!

[YE-TW]

Dave, you're utterly amazing!!! Thank you so much!!! Works perfectly now!!! Really, really appreciate it!!!

And, yes, I'm opening a bug with MadCap...

All the best,
Yael