Accordion Content Script - changing text color

[renset]

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

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

3) Describe problem:

I am using this script to collapse and expand content for 40 questions and answers, and have a question re text color. With the header text in black, I have been able to get the header text to change color when the question is expanded to view the answer. Is it possible to have the header text remain the different color once someone has collapsed the question after viewing, so they will know they have already viewed the question, similar to a visited link? The coding follows.

This is a great script and just what I had been looking for to organize a lot of content. Thank you very much for any help you can provide.


<script type="text/javascript" src="jquery-1.2.2.pack.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">

.question{ /*header of 1st demo*/
cursor: hand;
cursor: pointer;
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
text-decoration:none;
}

.openquestion{ /*class added to contents of 1st demo when they are open*/
color: #336699;
}

.text10{ /*class added to contents of 1st demo when they are open*/
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
text-decoration:none;
}

</style>

<script type="text/javascript">

//Initialize first demo:
ddaccordion.init({
headerclass: "question", //Shared CSS class name of headers group
contentclass: "text10", //Shared CSS class name of contents group
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.
animatedefault: false, //Should contents open by default be animated into view?
persiststate: true, //persist state of opened contents within browser session?
toggleclass: ["", "openquestion"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: "fast", //speed of animation: "fast", "normal", or "slow"
oninit:function(expandedindices){ //custom code to run when headers have initalized
//do nothing
},
onopenclose:function(header, index, state, isclicked){ //custom code to run whenever a header is opened or closed
//do nothing
}
})
</script>

[ddadmin]

The optional onopenclose() event handler should do the trick. Basically you'd have something like this:

onopenclose:function(header, index, state, isclicked){ //custom code to run whenever a header is opened or closed
 if (state=="none" && isclicked==true){ //if header is contracted as a result of the user clicking on a header
  header.style.color="gray" //change header color to gray
 }
}

More info here: http://www.dynamicdrive.com/dynamici...uppliment2.htm

[renset]

Thank you for the code and the link to extra documentation that you provided. I have tried the code that you included, however, when the page is loaded all the content is expanded and will not collapse.

I will keep trying to get this to work and will reread the documentation. Thanks again for the help!

[ddadmin]

Thank you for the code and the link to extra documentation that you provided. I have tried the code that you included, however, when the page is loaded all the content is expanded and will not collapse.

There must be an error in your syntax. Don't forget that there should be a comma after each parameter, except the very last one. So for example:

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: "fast", "normal", or "slow",
onopenclose:function(header, index, state, isclicked){ //custom code to run whenever a header is opened or closed
 if (state=="none" && isclicked==true){ //if header is contracted as a result of the user clicking on a header
  header.style.color="gray" //change header color to gray
 }
}

[renset]

From what I can tell, everything matches what is in the documentation and the additional code that you provided, but it is certainly possible that I am overlooking something. If you have the time to do so, would you mind to look through the code below?

Thanks again for your help with this.

<script type="text/javascript">

//Initialize first demo:
ddaccordion.init({
headerclass: "question", //Shared CSS class name of headers group
contentclass: "answer", //Shared CSS class name of contents group
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.
animatedefault: false, //Should contents open by default be animated into view?
persiststate: true, //persist state of opened contents within browser session?
toggleclass: ["", "openquestion"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: "fast", //speed of animation: "fast", "normal", or "slow"
oninit:function(expandedindices){ //custom code to run when headers have initalized
//do nothing
}
onopenclose:function(header, index, state, isclicked){ //custom code to run whenever a header is opened or closed
if (state=="none" && isclicked==true){ //if header is contracted as a result of the user clicking on a header
header.style.color="gray" //change header color to gray
}
})
</script>

[ddadmin]

Yep, you overlooked the comma that should follow the oninit() parameter:

oninit:function(expandedindices){ //custom code to run when headers have initalized
//do nothing
},
onopenclose:function(header, index, state, isclicked){ //custom code to run whenever a header is opened or closed
if (state=="none" && isclicked==true){ //if header is contracted as a result of the user clicking on a header
header.style.color="gray" //change header color to gray
}

[renset]

Yes, thank you so much. It is now working!