Help with link color change on click | Animated Collapsible DIV V2.4 [Archive]

View Full Version : Help with link color change on click | Animated Collapsible DIV V2.4

sitehost

06-20-2011, 04:09 PM

1) Script Title:
Animated Collapsible DIV V2.4

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm

3) Describe problem:

I used a simplified version of this script to create 15 questions on my web page. When a question is clicked, the answer slides down beneath it. When another question is clicked the previous answer slides up (disappears) as the new answer slides down below the newly clicked question. I would like each question to change color once it is clicked. This way the color change will let readers know which questions they have already clicked. I have scripted the code (example below) in an HTML script box on my web page. My website is created using Yahoo PageBuilder. I would appreciate knowing what coding I can add to get the questions to change from "#996600" to color "#999999" when clicked.

I am not familiar with scripting so this has been a a trial and error process for me. But I'm very pleased thus far with the clean look and function of this simplified script.

I will appreciate your assistance. Thank you.

<!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('q1', 'fade=5,speed=300,group=questions,hide=1')
animatedcollapse.addDiv('q2', 'fade=5,speed=300,group=questions,persist=0,hide=1')
animatedcollapse.addDiv('q3', 'fade=5,speed=300,group=questions,hide=1')

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
}

animatedcollapse.init()

</script>

<p>
<a href="javascript:animatedcollapse.show('q1')"><font color="#996600" face="Trebuchet MS" style="font-size:10pt"><u>QUESTION</u></a></font><a href="javascript:animatedcollapse.hide('q1')"></a>
</p>

<div id="q1" style="width: 550px; background: #ffffff;"><font color="#333333" face="Trebuchet MS" style="font-size:10pt">ANSWER</i></font>
</div>

<p>
<a href="javascript:animatedcollapse.show('q2')"><font color="#996600" face="Trebuchet MS" style="font-size:10pt"><u>QUESTION</u></a></font><a href="javascript:animatedcollapse.hide('q2')"></a>
</p>

<div id="q2" style="width: 550px; background: #ffffff;"><font color="#333333" face="Trebuchet MS" style="font-size:10pt">ANSWER</font>
</div>

<p>
<a href="javascript:animatedcollapse.show('q3')"><font color="#996600" face="Trebuchet MS" style="font-size:10pt"><u>QUESTION</u></a></font><a href="javascript:animatedcollapse.hide('q3')"></a>
</p>

<div id="q3" style="width: 550px; background: #ffffff"><font color="#333333" face="Trebuchet MS" style="font-size:10pt">ANSWER</font>
</div>

ddadmin

06-20-2011, 08:33 PM

There are a few ways to do this, one of them being the following:

1) Remove the extranous <font> tags in your markup, as they interfere with using CSS dynamically to color your links
2) Give each question link a unique ID in the form of divid+"link", where divid is the ID value of the DIV the link toggles
3) And finally, use the ontoggle event handler of the script to dynamically apply a different color to a link when it's clicked on and expands the corresponding content.

With that said, the below is the complete modified markup:

<!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('q1', 'fade=5,speed=300,group=questions,hide=1')
animatedcollapse.addDiv('q2', 'fade=5,speed=300,group=questions,persist=0,hide=1')
animatedcollapse.addDiv('q3', 'fade=5,speed=300,group=questions,hide=1')

animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
if (state=="block")
$('a#'+divobj.id+'link').css('color', (state=='block')? 'red' : 'blue') //"red" when question has been expanded already, blue if never
}

animatedcollapse.init()

</script>

<p>
<a id="q1link" href="javascript:animatedcollapse.show('q1')">QUESTION</a><a href="javascript:animatedcollapse.hide('q1')"></a>
</p>

<div id="q1" style="width: 550px; background: #ffffff;">ANSWER</i>
</div>

<p>
<a id="q2link" href="javascript:animatedcollapse.show('q2')"><u>QUESTION</u></a><a href="javascript:animatedcollapse.hide('q2')"></a>
</p>

<div id="q2" style="width: 550px; background: #ffffff;">ANSWER
</div>

<p>
<a id="q3link" href="javascript:animatedcollapse.show('q3')"><u>QUESTION</u></a><a href="javascript:animatedcollapse.hide('q3')"></a>
</p>

<div id="q3" style="width: 550px; background: #ffffff">ANSWER
</div>

sitehost

06-21-2011, 11:46 AM

Thank you for your reply.

I removed the extraneous <font> tags and the Q&As now appear in the (default?) Times New Roman font, questions are in blue and once clicked turn red. The answers appear in black.

At this point, I don't know how to incorporate the other changes you suggest because I don't know what the heck you're talking about. It's like I'm in a French Cafe with a French speaking waiter and I can't understand the menu. What do I order? (you should laugh here...please? :o)

I doubt I will ever do another bit of coding to my website after this one. I was hoping someone would write out exactly what I need in the script I provided so that I can copy and paste it. I don't know any of the terms you are referring to or what they do. I'm sorry.

I'll keep working on it though.