PDA

View Full Version : Styling multiple headers within accordion script



samlies
08-13-2008, 07:12 PM
1) Script Title: Accordion Content script

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

3) Describe problem:

I've searched the forum and tried to implement the customization. What I'm trying to do is for each main header, create a specific style (background image) to be used on each header (whether that is the h3, menuitem, div (silverheader) )

Has anyone else wanted to style each of the headers to have a different background image or color? Any thoughts or suggestions?

Thanks in advance!

rangana
08-14-2008, 12:27 AM
I might not take things right, but you can give all those headers a unique ID and give them a style of your desire through CSS.

Let me quote the silver accordion. Try to add highlighted in the markups:


<div class="silverheader" id="u1"><a href="http://www.dynamicdrive.com">Dynamic Drive</a></div>
<div class="submenu">
Some random content here<br />
</div>
<div class="silverheader" id="u2"><a href="http://www.dynamicdrive.com/style/" >CSS Examples</a></div>
<div class="submenu">
Some random content here<br />
</div>
<div class="silverheader" id="u3"><a href="http://www.javascriptkit.com">JavaScript Kit</a></div>
<div class="submenu">
Some random content here<br />
</div>
<div class="silverheader" id="u4"><a href="http://www.cssdrive.com">CSS Drive</a></div>
<div class="submenu">
Some random content here<br />
<img src="http://i27.tinypic.com/sy7295.gif" />
</div>
<div class="silverheader" id="u5"><a href="http://www.codingforums.com">Coding Forums</a></div>
<div class="submenu">
Some random content here<br />
</div>
</div>


And use those IDs in your CSS:


#u1{background:#9c0;}
#u2{background:#fc0;}
#u3{background:#eee;}
#u4{background:#f00;}
#u5{background:#333;}


Hope that makes sense.

samlies
08-15-2008, 12:50 PM
Thank you rangana!

I actually started manipulating the code and came up with classes for each specific menu item that had to change based on the link hover.

a:link.classname, a:visited.classname, a:hover.classname {background: transparent url(images/imagename.png) no-repeat top left}

Thanks!!