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
Closing an Expandable Section
-
- Propeller Head
- Posts: 11
- Joined: Mon May 15, 2017 5:07 am
Re: Closing an Expandable Section
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/
https://ukauthor.wordpress.com/2016/09/ ... wns-html5/
Re: Closing an Expandable Section
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:
Here is my .js code:
Would appreciate any help. The "close" for dropdowns is absolutely fantastic. Thanks again!
Best regards,
Yael
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;
}
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();
});
});
});
Best regards,
Yael
Re: Closing an Expandable Section
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!
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!
-
- Sr. Propeller Head
- Posts: 262
- Joined: Wed Apr 18, 2007 2:25 am
- Location: Nottingham, UK
Re: Closing an Expandable Section
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
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
Re: Closing an Expandable Section
Yep - I think the following jQuery should work:
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() }
Code: Select all
$(document).ready(function() {
$("ul.navigation").on("loaded", function () {
$("a.toggler").first().click();
});
});
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() }
-
- Sr. Propeller Head
- Posts: 262
- Joined: Wed Apr 18, 2007 2:25 am
- Location: Nottingham, UK
Re: Closing an Expandable Section
I'm speechless! You've gone above and beyond. Thank you so much, I'll give it a try.
UPDATE: Works perfectly!
UPDATE: Works perfectly!
Re: Closing an Expandable Section
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
And, yes, I'm opening a bug with MadCap...
All the best,
Yael