Accordion Content script collapse on mouse-out?

**jumpingflea** · 03-12-2010, 01:35 AM

1) Script Title: Accordion Content script (v1.7.1)

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

I am using this script, and I like it, but I want the contents to collapse when you roll the mouse OFF the title bar, instead of having to roll over another one.

Basically, I want them ALL to be collapsed ALL the time EXCEPT when you mouseover the title bar.

I'm a code newbie, just learning, can't figure it out. Any suggestions?

Thanks,
Liv

**ddadmin** · 03-12-2010, 11:06 PM

One way to do this is to wrap the HTML markup portion of your accordions in a DIV, then get the script to collapse all of the accordion contents within it when the mouse rolls out of this master DIV. Here's a complete example, with the new editions in red:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="ddaccordion.js">

/***********************************************
* Accordion Content script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

</script>


<style type="text/css">

.mypets{ /*header of 1st demo*/
cursor: hand;
cursor: pointer;
padding: 2px 5px;
border: 1px solid gray;
background: #E1E1E1;
}

.openpet{ /*class added to contents of 1st demo when they are open*/
background: yellow;
}

</style>

<script type="text/javascript">

//Initialize first demo:
ddaccordion.init({
	headerclass: "mypets", //Shared CSS class name of headers group
	contentclass: "thepet", //Shared CSS class name of contents group
	revealtype: "mouseover", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
	mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
	collapseprev: true, //Collapse previous content (so only one open at any time)? true/false 
	defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc]. [] denotes no content.
	onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
	animatedefault: false, //Should contents open by default be animated into view?
	persiststate: true, //persist state of opened contents within browser session?
	toggleclass: ["", "openpet"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
	togglehtml: ["none", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
	animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
	oninit:function(expandedindices){ //custom code to run when headers have initalized
		//do nothing
	},
	onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
		//do nothing
	}
})
</script>

<BODY>
<div id="mastercontainer">

<h3 class="mypets">Dogs</h3>
<div class="thepet">
<img src="http://i10.tinypic.com/7xlrga1.jpg" />
The dog is a domestic subspecies of the wolf, a mammal of the Canidae family of the order Carnivora. The term encompasses both feral and pet varieties and is also sometimes used to describe wild canids of other subspecies or species. The domestic dog has been (and continues to be) one of the most widely-kept working and companion animals in human history, as well as being a food source in some cultures.
</div>

<h3 class="mypets">Cats</h3>
<div class="thepet">
The Cat, also known as the Domestic Cat or House Cat to distinguish it from other felines, is a small carnivorous species of crepuscular mammal that is often valued by humans for its companionship and its ability to hunt vermin. It has been associated with humans for at least 9,500 years.
</div>

<h3 class="mypets">Rabbits</h3>
<div class="thepet">
Rabbits are small mammals in the family Leporidae of the order Lagomorpha, found in several parts of the world. There are seven different genera in the family classified as rabbits, including the European rabbit (Oryctolagus cuniculus), cottontail rabbit (genus Sylvilagus; 13 species), and the Amami rabbit (Pentalagus furnessi, endangered species on Amami O-shima, Japan). There are many other species of rabbit, and these, along with cottontails, pikas, and hares, make up the order Lagomorpha. Rabbits generally live between four and twenty years.
</div>

</div>

<script type="text/javascript">

jQuery(document).ready(function($){ //fire on DOM ready
	var master=$('div#mastercontainer')
	master.mouseleave(function(){
		ddaccordion.collapseall("mypets")
	})
})
</script>

**jumpingflea** · 03-15-2010, 04:15 PM

DDadmin,

Thank you. That works, not exactly as I wanted, but good enough.

Thank you!

Thread: Accordion Content script collapse on mouse-out?

Thread Tools

Search Thread

Accordion Content script collapse on mouse-out?

The Following User Says Thank You to ddadmin For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions