text a:active not working in Animated Collapsible DIV

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" />&nbsp; 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. :rolleyes: Can somebody shed some light?

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')
}

---

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

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()

---

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

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?

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.

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

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

*resolved*

At second glance I was able to quickly modify the accordion script to achieve the desired effect I was going for.

Thanks,
Sarah

This works great, but I have a specific case where certain links have to also change to a different color, so therefore I need to target some specific ID's or classes. I need all of them to change to bold, but I am not getting the specific syntax correct to target a specific ID to change color. Is it also/alternately possible to target a group and apply a set of changes?

Here's the part of the code below that has me a bit stumped:

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('font-weight', (state=='block')? 'bold' : 'normal')

To also make toggler links that carry a certain CSS class name (ie: "someclass") bold when expanded, you would extend the code above with the part in red below:

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')
                if ($('#'+divobj.id+"-toggle").hasClass('someclass'))
                        $('#'+divobj.id+"-toggle").css('fontWeight', (state=='block')? 'bold' : 'normal')
        }
}

---

Thank you very much! I'm really learning a lot here. One thing I've noticed is that when a link is set to toggle a div and this type of function has been applied to it, the regular css :hover and :active states disappear. I guess this is just the nature of having a script applied to it that overrides normal behavior?

Well, when you explicitly change the CSS color of a link, by way of:

Code:

---

$('#'+divobj.id+"-toggle").css('color', (state=='block')? 'green' : 'gray')

---

for example, that operation supersedes the color values set in the ":hover" and "active" states. My CSS specificity is a little rusty, but I believe that's the cause. If so, you might instead switch CSS classes instead, in which all states of the link accounted for within the CSS class definition, for example:

Code:

---

$('#'+divobj.id+"-toggle").get(0).className=(state=='block')? 'greenclass' : 'grayclass'

---

Ah OK. Very interesting and powerful - I forget the power of jQuery sometimes until a specific example like this comes along. I'll have a go at it and if it works I'll let you know. Thanks again for being so kind and helpful!