Adding css style to javescript menu

Hi,
I am working with the switch content menu from http://www.dynamicdrive.com/dynamicindex17/switchcontent.htm

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){
      this.colorOpen=openColor
      this.colorClosed=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
      this.colorClosed=cssClassClosed
}

Thx
ipavloAsked:
Who is Participating?
 
gnoonCommented:
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){
      this.cssOpen=openCss
      this.cssClosed=closeCss
}
// PRIVATE: toggle header css style
switchcontent.prototype.togglecss=function(header, css){
      if (typeof this.cssOpen!="undefined")
            header.className=css
}
// PRIVATE: overrides old implement
switchcontent.prototype.oldcontractcontentimp=switchcontent.prototype.contractcontent;
switchcontent.prototype.oldexpandcontentimp=switchcontent.prototype.expandcontent;
switchcontent.prototype.contractcontent=function(header){
      this.oldcontractcontentimp(header)
      this.togglecss(header, this.cssClosed)
}
switchcontent.prototype.expandcontent=function(header){
      this.oldexpandcontentimp(header)
      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.setPersist(true)
bobexample.collapsePrevious(true) //Only one content open at any given time
bobexample.init()

</script>

Warning: changing the whole style of element may cause improper working
0
 
HonorGodSoftware EngineerCommented:
Instead of referencing this.colorOpen and this.colorClosed what you need to use is:

  this.className = openColorClass;

0
 
ipavloAuthor Commented:
Thank you so much  - this is awesome :-)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.