Adding css style to javescript menu

Posted on 2007-10-15
Last Modified: 2013-11-19
I am working with the switch content menu from

Instead of using the colors in the "bobexample.setColor('darkred', 'black')" I would like it to reference a style sheet.

The javascript function is
switchcontent.prototype.setColor=function(openColor, closeColor){

so I need it say something like this -
switchcontent.prototype.setColor=function(openColor, closeColor){ //PUBLIC: Set open/ closing color of switch header. Optional
      this.colorOpen= cssClassOpen

Question by:ipavlo
    LVL 41

    Expert Comment

    Instead of referencing this.colorOpen and this.colorClosed what you need to use is:

      this.className = openColorClass;

    LVL 16

    Accepted Solution

    Try this in the web page

    <script type="text/javascript">

    // PUBLIC: Set open/ closing css name of switch header. Optional
    switchcontent.prototype.setCss=function(openCss, closeCss){
    // PRIVATE: toggle header css style
    switchcontent.prototype.togglecss=function(header, css){
          if (typeof this.cssOpen!="undefined")
    // PRIVATE: overrides old implement
          this.togglecss(header, this.cssClosed)
          this.togglecss(header, this.cssOpen)

    // change code below to your adapt with your page

    var bobexample=new switchcontent("switchgroup1", "div")
    bobexample.setStatus('<img src="open.png" /> ', '<img src="close.png" /> ')
    bobexample.setCss('CssOpen', 'CssClose')
    bobexample.collapsePrevious(true) //Only one content open at any given time


    Warning: changing the whole style of element may cause improper working

    Author Comment

    Thank you so much  - this is awesome :-)

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Looking for New Ways to Advertise?

    Engage with tech pros in our community with native advertising, as a Vendor Expert, and more.

    What is Node.js? Node.js is a server side scripting language much like PHP or ASP but is used to implement the complete package of HTTP webserver and application framework. The difference is that Node.js’s execution engine is asynchronous and event…
    Introduction Since I wrote the original article about Handling Date and Time in PHP and MySQL ( several years ago, it seemed like now was a good time to updat…
    Viewers will learn about the different types of variables in Java and how to declare them. Decide the type of variable desired: Put the keyword corresponding to the type of variable in front of the variable name: Use the equal sign to assign a v…
    The viewer will learn how to dynamically set the form action using jQuery.

    737 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    22 Experts available now in Live!

    Get 1:1 Help Now