text a:active not working in Animated Collapsible DIV

**yoonmi** · 09-16-2009, 01:47 PM

1) Script Title: Animated Collapsible DIV

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

3) Describe problem: I having a problem with setting a:active link references to my toggle buttons / links.

<a href="#" rel="toggle[cat]" data-openimage="images/downarrow.png" data-closedimage="images/uparrow.png"><img src="images/uparrow.png" border="0" />  print</a>

My images are fine it's my text links that aren't working in ff and safari.

Here is my css
a:link { color:#fff; text-decoration:none; }
a:visited { color:#fff; text-decoration:none; }
a:hover { color:#739DD2; text-decoration:none; }
a:active, a:focus { color: #739DD2; text-decoration:none; }

So this may not be a 'scripting problem' but I need to know if there is a fix.

What it should do is when it's 'enabled' - opened the text should be light blue in color. When it's collapsed it should be white. I can't get it to stay light blue when it expands. As soon as my link loose focus it changes back to white. The image is perfect it stays the down image until you collapse the div...now I need to know how I can get the text link to stay until you collapse the div.

Maybe I'm doing it the wrong way.

Can somebody shed some light?

**ddadmin** · 09-17-2009, 04:39 AM

It's not as easy as just styling the "A" element's various states, as what you really need to detect is the state of the corresponding content (whether it's expanded or not), and not the anchor link.

What you're asking can be accomplished using the ontoggle event handler of the script. Specifically, first, give your toggler text link a similiar ID as the corresponding collapsible content, except with the addition of "-toggle" suffix:

Code:

<a id="jason-toggle" href="javascript:animatedcollapse.toggle('jason')">Open/ Expand</a>

<div id="jason" style="width: 300px; background: #FFFFCC; display:none">
<b>Content inside DIV!</b><br />
<b>Note: Fade effect enabled. Height programmically defined. DIV hidden using inline CSS.</b><br />
</div>

Then up where you define the ontoggle event, manipulate the CSS color of the toggler link accordingly:

Code:

animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
	if ($('#'+divobj.id+"-toggle").length==1) //if toggler link exists
		$('#'+divobj.id+"-toggle").css('color', (state=='block')? 'green' : 'gray')
}

**yoonmi** · 09-17-2009, 04:58 PM

great thanks for the code and information - however now I my images are not working...
http://www.webmediafx.com/focusin/work.htm

<a href="#" rel="toggle[cat]" data-openimage="images/downarrow.png" data-closedimage="images/uparrow.png"><img src="images/uparrow.png" border="0" /></a>
<a id="cat-toggle" href="javascript:animatedcollapse.toggle('cat')">print</a>

Thanks,
Sarah

**ddadmin** · 09-17-2009, 09:51 PM

Your ontoggle() event needs to be defined before init() is called, which now it's after. So in other words:

Code:

animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
	if ($('#'+divobj.id+"-toggle").length==1) //if toggler link exists
		$('#'+divobj.id+"-toggle").css('color', (state=='block')? '#739DD2' : 'white')
}


animatedcollapse.init()

**yoonmi** · 09-18-2009, 01:06 AM

Can I put another attribute? such as the image inside the toggle javascript you gave me as and attribute? Because I'm having some sort of conflict when I put these two piece of code together.

<a href="#" rel="toggle[cat]" data-openimage="images/downarrow.png" data-closedimage="images/uparrow.png"><img src="images/uparrow.png" border="0" /></a>
<a id="cat-toggle" href="javascript:animatedcollapse.toggle('cat')">print</a>

It's as if the rel="toggle[cat]" is conflicting with id="cat-toggle"
much appreciated!!

Sarah

**yoonmi** · 09-19-2009, 02:42 PM

The two functions don't seem to be working together...

<a href="#" rel="toggle[cat]" data-openimage="images/downarrow.png" data-closedimage="images/uparrow.png"><img src="images/uparrow.png" border="0" /></a>
<a id="cat-toggle" href="javascript:animatedcollapse.toggle('cat')">print</a>

Can I use the two functions together?

**ddadmin** · 09-20-2009, 08:19 AM

The two actions shouldn't conflict with one another. At a glance I can't see why it's not working on your page, though I've created a fresh example with both the text active state and image active state enabled, and the two work:

Code:

<!DOCTYPE HTML>

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

/***********************************************
* Animated Collapsible DIV v2.4- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>


<script type="text/javascript">

animatedcollapse.addDiv('jason', 'fade=1,height=80px')
animatedcollapse.addDiv('kelly', 'fade=1,height=100px')
animatedcollapse.addDiv('michael', 'fade=1,height=120px')

animatedcollapse.addDiv('cat', 'fade=0,speed=400,group=pets')
animatedcollapse.addDiv('dog', 'fade=0,speed=400,group=pets,persist=1,hide=1')
animatedcollapse.addDiv('rabbit', 'fade=0,speed=400,group=pets,hide=1')

animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
	if ($('#'+divobj.id+"-toggle").length==1) //if toggler link exists
		$('#'+divobj.id+"-toggle").css('color', (state=='block')? 'green' : 'gray')
}

animatedcollapse.init()

</script>

<body>

<b><a href="javascript:animatedcollapse.show(['jason', 'kelly', 'michael'])">Show Examples 1, 2, 3</a> | <a href="javascript:animatedcollapse.hide(['jason', 'kelly', 'michael'])">Hide Examples 1, 2, 3</a></b>

<p><b>Example 1 (individual):</b></p>

<a id="jason-toggle" href="javascript:animatedcollapse.toggle('jason')">Open/ Expand Example 1</a>

<div id="jason" style="width: 300px; background: #FFFFCC; display:none">
<b>Content inside DIV!</b><br />
<b>Note: Fade effect enabled. Height programmically defined. DIV hidden using inline CSS.</b><br />
</div>


<p><b>Example 2 (individual):</b></p>

<a href="javascript:animatedcollapse.toggle('kelly')"><img src="toggle.jpg" border="0" /></a> <a href="javascript:animatedcollapse.show('kelly')">Slide Down</a> || <a href="javascript:animatedcollapse.hide('kelly')">Slide Up</a>

<div id="kelly" style="width: 300px; background: #D2FBFF; display:none">
<b>Content inside DIV!</b><br />
<b>Note: Fade effect enabled. Height programmically defined. DIV hidden using inline CSS.</b><br />
</div>



<p><b>Example 3 (individual):</b></p>

<a href="javascript:animatedcollapse.toggle('michael')"><img src="toggle.jpg" border="0" /></a> <a href="javascript:animatedcollapse.show('michael')">Slide Down</a> || <a href="javascript:animatedcollapse.hide('michael')">Slide Up</a>

<div id="michael" style="width: 300px; background: #E7FFCC; display:none">
<b>Content inside DIV!</b><br />
<b>Note: Fade effect enabled. Height programmically defined. DIV hidden using inline CSS.</b><br />
</div>


<hr style="margin: 1em 0" />



<p><b>Example 4 (part of group "pets"):</b></p>

<a href="#" rel="toggle[cat]" data-openimage="collapse.jpg" data-closedimage="expand.jpg"><img src="collapse.jpg" border="0" /></a> <a href="javascript:animatedcollapse.show('cat')">Slide Down</a> || <a href="javascript:animatedcollapse.hide('cat')">Slide Up</a>

<div id="cat" style="width: 400px; background: #BDF381;">
The cat (Felis catus), 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. A skilled predator, the cat is known to hunt over 1,000 species for food. It can be trained to obey simple commands.
</div>



<p><b>Example 5 (part of group "pets"):</b></p>

<a href="#" rel="toggle[dog]" data-openimage="collapse.jpg" data-closedimage="expand.jpg"><img src="collapse.jpg" border="0" /></a> <a href="javascript:animatedcollapse.show('dog')">Slide Down</a> || <a href="javascript:animatedcollapse.hide('dog')">Slide Up</a>

<div id="dog" style="width: 400px; background: #BDF381;">
The dog (Canis lupus familiaris) is a domesticated 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 one of the most widely kept working and companion animals in human history, as well as being a food source in some cultures.
</div>



<p><b>Example 6 (part of group "pets"):</b></p>

<a href="#" rel="toggle[rabbit]" data-openimage="collapse.jpg" data-closedimage="expand.jpg"><img src="collapse.jpg" border="0" /></a> <a href="javascript:animatedcollapse.show('rabbit')">Slide Down</a> || <a href="javascript:animatedcollapse.hide('rabbit')">Slide Up</a>

<div id="rabbit" style="width: 400px; background: #BDF381">
Rabbits are ground dwellers that live in environments ranging from desert to tropical forest and wetland. Their natural geographic range encompasses the middle latitudes of the Western Hemisphere. In the Eastern Hemisphere rabbits are found in Europe, portions of Central and Southern Africa, the Indian subcontinent, Sumatra, and Japan.
</div>

Try pasting the above and save it as a new page to test it out, ensuring the images and .js files referenced are correct.

**yoonmi** · 09-21-2009, 10:48 PM

thanks I needed the text link to toggle - even though I couldn't get both to work, I figured since they were in the 'group' that I just 'show' the div...

So MUCH appreciated.

I was able to figure my work around based on your new code that you provided!!

Sarah

**yoonmi** · 09-26-2009, 01:50 PM

Ok now there is a different issue that needs to be worked out not only do they have to be a different color when the collapsible div is opened but now they have to have the same rollover color too...any ideas how to resolve that one?

Thanks,
Sarah