Results 1 to 7 of 7

Thread: Accordion Content Script - changing text color

  1. #1
    Join Date
    Jan 2008
    Posts
    17
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default Accordion Content Script - changing text color

    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>

  2. #2
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

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

    Code:
    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

  3. The Following User Says Thank You to ddadmin For This Useful Post:

    renset (05-26-2008)

  4. #3
    Join Date
    Jan 2008
    Posts
    17
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default

    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!

  5. #4
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    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:

    Code:
    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
     }
    }

  6. #5
    Join Date
    Jan 2008
    Posts
    17
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default

    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>

  7. #6
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

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

    Code:
    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
    }

  8. The Following User Says Thank You to ddadmin For This Useful Post:

    renset (05-26-2008)

  9. #7
    Join Date
    Jan 2008
    Posts
    17
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default

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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •