Close option at the end of a drop-down

btompkins · Post by **btompkins** » Thu Sep 22, 2016 12:54 pm

I am wondering if there is a way to give a reader the option to close a drop-down at the bottom of the drop-down so they don't have to scroll back to the top? I'm writing a tutorial that has a few drop-down sections, so I might like to have the option for a reader to click "Close" (or something similar) at the bottom to collapse the section they're in before they move to the next section. Any ideas?

Thanks!

Rene Severens · Post by **Rene Severens** » Mon Sep 26, 2016 6:43 am

Hi,

I thought I had seen this before, entered by someone else:

Create a "drowdownclose.js" with the next lines and store it in the resource folder (for example in a new created folder named "Scripts")

$(document).ready(function(){
$(".dropDownBody").append("<a href='javascript:void(0);' class='dropDownClose'>(Close)</a>").click(function() {
$(this).parents(".dropDown").find(".dropDownHotspot").click();
});
});

and in the <head> section of the master page add this:

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

And this works, BUT ... (and that is why I would like to respond on this) ... it has a slight side-effect: If clicked ANYWHERE in the opened dropdown, the dropdown is closed.

So why show a hyperlink (Close) ? Maybe the script can be changed so it actually works only when clicked the hyperlnk? I am not a script genius...

Greetings,
Rene Severens

Post by **NorthEast** » Mon Sep 26, 2016 7:12 am

Yep, I posted a reply, but deleted it because it had a few problems, which I didn't have time to fix properly at the time.

You could try this instead, which seems to work for me (even with nested dropdowns) in a HTML5 target:

Code: Select all

$(document).ready(function(){
		$(".dropDownBody").append("<a href='javascript:void(0);' class='dropDownClose'>(Close)</a>");
		$(".dropDownClose").click(function() {
			$(this).parent().prev(".dropDownHead").children(".dropDownHotspot").click();
		});
});

You can change the (Close) text in the script, and format it by adding a.dropDownClose {} to your CSS.

The script adds a (Close) link to every .dropDownBody, and if you click on (Close) then it will click the corresponding .dropDownHotspot link.

Rene Severens · Post by **Rene Severens** » Tue Sep 27, 2016 2:09 am

Hi Dave,

Thanks!

This works perfect!

Thank you very much!

Rene Severens

Post by **NorthEast** » Tue Sep 27, 2016 10:26 am

I've posted a solution for adding a close link to both dropdowns and togglers:
viewtopic.php?f=12&t=28079

btompkins · Post by **btompkins** » Tue Sep 27, 2016 12:44 pm

Thanks Dave and Rene! I followed these steps and got the Close link in my drop-downs!

MadCap Software Forums

Close option at the end of a drop-down

Close option at the end of a drop-down

Re: Close option at the end of a drop-down

Re: Close option at the end of a drop-down

Re: Close option at the end of a drop-down

Re: Close option at the end of a drop-down

Re: Close option at the end of a drop-down