Animated Collapsible DIV - click anywhere else and collapse all

[newyorker2]

1) Script Title: Animated Collapsible DIV v2.01

2) Script URL (on DD):http://www.dynamicdrive.com/dynamici...edcollapse.htm

3) Describe problem:


I successfully set it up, everything works fine.
however when i click on anywhere else in the browser i want to close
all the toggles. In other words, if a user clicks anywhere else in the
browser all menus will collapse.

any help is appreciated.

[newyorker2]

can anybody help?

i think i need something like: document.onclick = hideall;

[ddadmin]

It's a little more involved than that. At the end of your document, try adding a script like the following:

<script type="text/javascript">

$(document).click(function(e){
	var $target=$(e.target)
	if (!/javascript:animatedcollapse/i.test($target.attr('href')) && $target.parents('a[@href^="javascript:animatedcollapse"]').length==0){
		animatedcollapse.hide(['jason', 'kelly', 'michael'])
	}
})

</script>

And change "jason", "kelly" etc to the IDs of the content DIVs you wish to collapse when the user clicks anywhere on the page other than the controls themselves.

[newyorker2]

I am sorry I spoke too soon.

The solution you just wrote works good but with 1 problem.
if i click on the content of the div it also collapses the div.

i only want to collapse it when i click anywhere outside the DIVs.

I have a form field in the DIV so it needs to stay open when user clicks on it.

I hope you can help.

thank you

[ddadmin]

Sure. Inside the .js file, add to the line below the part in red:

			this.$divref=$('#'+this.id)
			this.$divref.click(function(e){e.stopPropagation()})

Basically this causes any clicks within the collapsible DIVs to not be affected by the code you added earlier to collapse them when a click occurs anywhere on the document.

[newyorker2]

thank you
thank you

[amberdesignz]

I added the code to the bottom of my document and it doesn't work for me. All the windows stay open.

<script type="text/javascript">

$(document).click(function(e){
var $target=$(e.target)
if (!/javascript:animatedcollapse/i.test($target.attr('href')) && $target.parents('a[@href^="javascript:animatedcollapse"]').length==0){
animatedcollapse.hide(['ktmracingbox', 'shoeibox', 'scottusabox', 'truthbox', 'sierrabox', 'rmsbox', 'realtybox', 'redbullbox','renthalbox', 'dhl','motorexbox', 'ngkbox', 'ktmpartsbox', 'vpbox', 'asteriskbox', 'brembobox', 'cmbox', 'conceptbox', 'fmfbox', 'regniabox', 'wpbox', 'twinairbox', 'hatchbox', 'ziptybox', 'gprbox', 'imsbox', 'michelinbox', 'astarbox', 'mpbox'])
}
})

</script>

[ddadmin]

Amber:
Please post a link to the page on your site that contains the problematic script so we can check it out.