Animated Collapsible DIV, toggle, border A element instead of swapping image

[lilpete]

1) Script Title:
Animated Collapsible DIV v2.4

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

3) Describe problem:
Hi, Thanks for an awesome script as always.
I am implementing it on a revamp of my website. Viewable here: (http://www.touch.steptoes.co.uk/index.html) Not live to the public though.

What I would like is for the section that has been toggled then has a blue border around the text link/button at the top, the same as the hover state.
It is the | Search | Brands | Categories | Contact Us | section in the header

So in effect make the border stick when it is toggled on, then dissappear when it is de-toggled.

This is what makes the border appear on hover:

#subheader a{display:block;text-decoration:none;border:1px solid #FFF;padding:6px;}
#subheader a:hover{border:1px solid #2A3791;}

Can the script effect or change the #subheader a element during its DIV expanding function?

Thanks for your time.

[ddadmin]

You can use the ontoggle event handler of the script to detect whenever a content has been expanded, then based on the ID of that content to reference the anchor link that toggled it. Then, add a class of "selected" to it to persist the hover state style while removing any selected class that may have been added to its peer anchor links previously. With all that in mind, do the following:

1) Extend your CSS to include a selected class:

#subheader a:hover, #subheader a.selected{border:1px solid #2A3791;}

2) Then, extend the initialization code for Animated DIV with the parts in red:

animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
	//$: Access to jQuery
	//divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
	//state: "block" or "none", depending on state
	if (state=="block"){
		var $anchor=$navlinks.filter('a[rel="toggle[' + divobj.id +']"]') //find link that toggled expanded content within nav UL
		if ($anchor.length==1){
			$navlinks.removeClass('selected')
			$anchor.addClass('selected')
		}
	}
}

jQuery(function($){
	$navlinks=$('ul#navileft li a[rel]') //reference links within navileft
})

animatedcollapse.init()

That should do it.

[lilpete]

Thank You!!
I knew the toggle function would be the key, but it broke every time I tried to edit it.

It works, but there is a split second where the border does not appear, between the hover and selected states.. but I can live with that.
I have edited the linked to site now so you can see the result.

Again! Thanks for your time! Much appreciated.

[lilpete]

Hi,

Sorry, but there is a part of the functionality that is not quite right.

It does not toggle off.. the border comes on when clicked, and can switch between them, but when clicked to toggle off a div the border stays.

Im sure a little tweak to your code would do it, but I cant see it myself.

Best Regards,

[lilpete]

Its ok, I have sussed it with my basic knowledge of JS...

animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
	//$: Access to jQuery
	//divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
	//state: "block" or "none", depending on state
	if (state=="block"){
		var $anchor=$navlinks.filter('a[rel="toggle[' + divobj.id +']"]') //find link that toggled expanded content within nav UL
		if ($anchor.length==1){
			$navlinks.removeClass('selected')
			$anchor.addClass('selected')
		}
			
	}
	else {$navlinks.removeClass('selected')}
}

jQuery(function($){
	$navlinks=$('ul#navileft li a[rel]') //reference links within navileft
})

animatedcollapse.init()

[loriensleafs]

Hi, this is exactly what I'm looking for but I'm using divs. So I have a thumb that when I roll over the the border changes due to the hover pseudo class, but I want the border to stay white when the div has been toggled to open. I just couldn't get the code modified no matter what I tried.

[ddadmin]

loriensleafs, what does the markup for each of your thumbnails look like?