Accordion Script Problems

1) Script Title: Accordion Menu

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

3) Describe problem:

My real issue isn't so much with the script rather than a question of its limitation. As the script is, the menus are set up as headers, and do not display content unless some form of printable text is entered into the header tags. I fixed this problem easily enough by converting the headers into DIVs, because I wanted to use images (while maintaining the CSS that the only images used are backgrounds).

So my problem is this: since the script is made to work assuming all headers require the same styles, how would you make it so that each individual header gets it own toggled class? To put it simply, I have two images for one button (a simple mouseover) but I want this to happen for each different header.

I would like to make two separate classes for each button saying that one class is how it should be collapsed, and the other is how it should be expanded, similar to how in the example .openheader compliments .menuheader.

The issue is that if I'm using different images for each button (which with my layout it is a must), I'm forced to make separate classes for each state of every button as well. Though I'm not fluent enough in javascript to know how to tell it associate one class with another. I know it has something to do with the toggleclass function, though this script only comes pre-written with that one instance of the toggleclass (menuheader and the corresponding openheader).

How do I make multiple classes toggle over to other classes?

Thanks


EDIT: If I didn't explain this very well, I suppose that the accordion script is irrelevant. Toggleclass is used once in the script given, but I need a toggleclass function for each and every button since they all with have different classes. If there is a simple way to do that, then I'm all for it. I really just needed a way to incorporate "click-activated" rollovers that didn't interfere with the consistency of the Accordion script.

(Oh, and sorry for the wall of text.)

You should be able to do this by taking advantage of the two event handlers of the script, specifically, the onopenclose() event.

Assuming your headers consist of a DIV with a background image::

Code:

---

<div class="menuheader">Header 1</div>

---

You would use the onopenclose() event to detect when the header is clicked on, whether it's expanded or not, and react accordingly. For example:

Code:

---

onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
 if (state=="block"){ //if header is expanded (as a result of either the user clicking on it or when the page loads)
  header.style.background=expandedbackgrounds[i]
 else{ //if it's contracted
  header.style.background=contractedbackgrounds[i]
 }
 }

---

Since you mentioned each header needs a different background image pair, each image pair is stored inside separate JS arrays, for example:

Code:

---

var expandedbackgrounds=[]
expandedbackgrounds[0]="url(expanded.gif)"
expandedbackgrounds[1]="url(expanded2.gif)"
expandedbackgrounds[2]="url(expanded3.gif)"

var contractedbackgrounds=[]
contractedbackgrounds[0]="url(contracted.gif)"
contractedbackgrounds[1]="url(contracted2.gif)"
contractedbackgrounds[2]="url(contracted3.gif)"

---

That's the basic theory.

Thanks for the well-laid out response and how quick you were able to help out.

Makes sense when you explain it, but my limited knowledge of javascript is hurting me here.

First off, where should I insert either of these codes? As for the arrays, there is the script actually in the HTML and the script that links off (accordion.js or something). Which one would be best to house those added arrays you gave me? Or does it matter?

Furthermore, I'm having a few problems interpreting exactly how I'm supposed use these in relation to my navigation system. You posted code though it is hard to read for someone who is unfamiliar with javascript, and it only adds complication that I can't tell which part of that is example filler text and which part is actually necessary code.

To answer both of these questions easily, I would ask that you repost the code where the header's contracted image is info.png and the image executed when the header is collapsed is info_active.png.

I don't mean to make this bothersome, but I think with these titles inserted it would be much more easy to see exactly where I need to be putting what when I attempt to go off and do this on my own.

Thanks again!

Sure. Here is a sample configuration code using the two images you mentioned above:

Code:

---

ddaccordion.init({
        headerclass: "expandable", //Shared CSS class name of headers group that are expandable
        contentclass: "categoryitems", //Shared CSS class name of contents group
        revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click" or "mouseover
        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
        onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
        animatedefault: false, //Should contents open by default be animated into view?
        persiststate: true, //persist state of opened contents within browser session?
        toggleclass: ["", "openheader"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
        togglehtml: ["prefix", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
        animatespeed: "normal", //speed of animation: "fast", "normal", or "slow"
        oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
                //do nothing
        },
        onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
                if (state=="block"){
                          header.style.background="url(info_active.png)"
                }
                else{ //if it's contracted
                          header.style.background="url(info.png)"
                }
        }
})

---

Did you read the documentation on the onopenclose() event handler?

That's perfect, exactly what I needed. Thank you!

I did indeed read the documentation though the articles I read related more to the text dropdowns provided in the examples of accordion scripts not relating to navigation. I suppose it might not have mattered too much but my biggest deal is being able to adapt the code from how you guys give it to how I need it. This is largely because my web design knowledge is limited to HTML, CSS, and php when I have needed it. Javascript is totally new for me, so I think its great there are resources such as this.

Again, thanks for the help and I only hope this works the first time around.

EDIT: And before I go thinking my problems are all gone, is it OK to assume that this code is repeatable as many times as I need it? I only gave you two images in my example but in reality there are multiple buttons, all with their own image pair for the rollover effect (although this has already been mentioned).

Quote:

---

Originally Posted by prisonsong

EDIT: And before I go thinking my problems are all gone, is it OK to assume that this code is repeatable as many times as I need it? I only gave you two images in my example but in reality there are multiple buttons, all with their own image pair for the rollover effect (although this has already been mentioned).

---

It depends what you mean by repeatable, but by specifying the image pairs as array (ie: expandedbackgrounds[] above), each header can have its own unique before/after background image, yes.

That seems simple enough, though in the second example you never specified where the script for the arrays are put. There are multiple places and files where I am able to insert this code, but I don't want to break anything. :p

That's because in the second example, you had asked for an explicit example using the two .png images. :) Anyhow, instead of:

Code:

---

        onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
                if (state=="block"){
                          header.style.background="url(info_active.png)"
                }
                else{ //if it's contracted
                          header.style.background="url(info.png)"
                }
        }

---

To use the array instead, it would be:

Code:

---

        onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
                if (state=="block"){
                          header.style.background=expandedbackgrounds[i]
                }
                else{ //if it's contracted
                          header.style.background=contractedbackgrounds[i]
                }
        }

---

I apologize for the confusion. Though unfortunately I think you misunderstood my question. I know how to use the arrays once they're set.

My question is where does this code go:

Code:

---

var expandedbackgrounds=[]
expandedbackgrounds[0]="url (expanded.gif)"
expandedbackgrounds[1]="url (expanded2.gif)"
expandedbackgrounds[2]="url (expanded3.gif)"

var contractedbackgrounds=[]
contractedbackgrounds[0]="url (contracted.gif)"
contractedbackgrounds[1]="url (contracted2.gif)"
contractedbackgrounds[2]="url (contracted3.gif)"

---

In the html document or in the ddaccordion php file? And where does it go in either one of these documents?

lol Thanks for sticking through with this, I know in some way this must be frustrating. We're nearing the end though. :D

EDIT: Actually, now that I've started messing with it using the arrays, I've messed everything up. I don't know how to call for which image I want to use. I have the array set up with all of the images, but the CSS can't tell the difference and I don't know how to tell it. I will make a new post with my own example for final clarification. Maybe we can wrap this up in the course of two or three more posts.

The array is in JavaScript, so anywhere within the SCRIPT tag is fine. Taking everything into account, something like:

Code:

---

<script type="text/javascript">

var expandedbackgrounds=[]
expandedbackgrounds[0]="url(expanded.gif)"
expandedbackgrounds[1]="url(expanded2.gif)"
expandedbackgrounds[2]="url(expanded3.gif)"

var contractedbackgrounds=[]
contractedbackgrounds[0]="url(contracted.gif)"
contractedbackgrounds[1]="url(contracted2.gif)"
contractedbackgrounds[2]="url(contracted3.gif)"

ddaccordion.init({
        headerclass: "expandable", //Shared CSS class name of headers group that are expandable
        contentclass: "categoryitems", //Shared CSS class name of contents group
        revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click" or "mouseover
        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
        onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
        animatedefault: false, //Should contents open by default be animated into view?
        persiststate: true, //persist state of opened contents within browser session?
        toggleclass: ["", "openheader"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
        togglehtml: ["prefix", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
        animatespeed: "normal", //speed of animation: "fast", "normal", or "slow"
        oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
                //do nothing
        },
        onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
                if (state=="block"){
                          header.style.background=expandedbackgrounds[i]
                }
                else{ //if it's contracted
                          header.style.background=contractedbackgrounds[i]
                }
        }
})

</script>

---

In this example, let's say I have two buttons that I want to have. Both of these have image pairs used for the rollovers.

These images are info.png and info_active.png for the first button. The second set is contact.png and contact_active.png.

Assuming I set up the array like you had suggested, then the script defining that array should look something like this:

Code:

---

var expandedbackgrounds=[]
expandedbackgrounds[0]="url (info_active.png)"
expandedbackgrounds[1]="url (contact_active.png)"

var contractedbackgrounds=[]
contractedbackgrounds[0]="url (info.png)"
contractedbackgrounds[1]="url (contact.png)"

---

This much is easy enough. I also set up the onopenclose() function with the corresponding image I want based on its value in the array or so I am assuming.

Lets say I'm ready to set this up in the actual page code, using CSS as I'm doing it.

This is what my header's styles look like, most of which is relative to the script given in the original accordion code:

Code:

---

.arrowlistmenu .menuheader{
font: bold 14px Verdana;
color: white;
margin-bottom: 1px;
text-transform: uppercase;
cursor: hand;
cursor: pointer;
height: 35px;
}

---

Because at the moment it makes no difference, I omitted the background image command so I'm not confusing anyone with code that is now obsolete.

Assuming I had a separate div for each header but using this CSS as reference, how would I tell my code to call from the array I had set up? Would I be using javascript inside of my CSS? Please keep in mind I'm as new as can be with javascript so specifics are appreciated.

Thank you.

EDIT: It seems I was creating this post as you replied to my previous ones. Thank you for answering my question about the javascript placement. The only one that remains is how to use this script once I've set it. The javascript is done, now how do I make CSS/html recognize it in my page?

There should be no spaces between url and (), so:

Code:

---

var expandedbackgrounds=[]
expandedbackgrounds[0]="url(info_active.png)"
expandedbackgrounds[1]="url(contact_active.png)"

var contractedbackgrounds=[]
contractedbackgrounds[0]="url(info.png)"
contractedbackgrounds[1]="url(contact.png)"

---

lol Thank you I suppose for that minor oversight. The javascript is irrelevant however. What I'm asking is now that it is done and set up, how do I tell the actual designing languages (CSS/html) how to put one of these images into the page?

This is going to look stupid because I know nothing about javascript but would it be something like this:

Code:

---

.arrowlistmenu .menuheader{
font: bold 14px Verdana;
color: white;
background: contractedbackgrounds[0]
margin-bottom: 1px;
text-transform: uppercase;
cursor: hand;
cursor: pointer;
height: 35px;
}

---

I honestly don't know how to tell CSS to point to this array. Until I figure it out, the javascript can't really help me.

EDIT: Well I can tell you that putting it that way didn't do it. I'm still at a loss for how to put this into the page.

You wouldn't, actually, as the JavaScript above explicitly sets the background of the DIV with the referenced background image. There's no need to specify a background attribute in your CSS at all.

So what would I do to set two separate DIVs using both of those different image pairs?

<div class="info">This DIV needs the info background images.</div>

<div class="contact">This DIV needs the contact background images.</div>

And so on...

I just don't know how to specify which DIVs get which image pair, even when they are in the array. I figured I would have to put something in the CSS, but if I don't, then how does it decipher which DIVs are getting which background images?

Which DIV gets which pair of images specified in the array is based on the order of the DIVs on the page. That is, the first DIV would get expandedbackgrounds[0] and contractedbackgrounds[0], the second DIV expandedbackgrounds[1] and contractedbackgrounds[1], and so on.

Oh damn I hope you don't mean that in a literal sense.

The first few DIVs on my page have nothing to do with this navigation menu.

I gotta say, I'm not too far from giving up. I think this javascript stuff is a little over my head.

I've put the array in the exact same spot as you indicated in your later example. I even copied and pasted so I wouldn't make a stupid mistake like putting spaces before url. Not only this, but when that didn't work I tried a number of variations that were long shots, but attempts nonetheless.

Maybe something is wrong, but more likely I'm just not understanding how you are telling me to do this. Apparently the DIVs require nothing to have the background images inserted, and while this makes no sense to me you seemed pretty sure of it so I even created a sample page where the only DIVs on the page are those of my navigation menu, corresponding with the assignments given to them by the array, still didn't work.

Honestly I've run out of ideas, and the documentation linked to from the accordion script page doesn't cover arrays or complex situations such as this. I've read through it multiple times only to find that migrating what they put to what I need is impossible unless I did some serious homework on javascript starting now, but I don't have the time.

Before I call it quits on this altogether, is anyone sure there isn't an ezmode way to explain this so that I couldn't possibly have room for questions? As it has been explained so far, it would appear I'm doing everything the way it should be done, but I still can't produce the desired result.

Any and all help or suggestions is appreciated.

Wow, a triple post. Surely someone has a solution to this problem. My only real issue is I want a different image for each header, and a rollover for that image after it is clicked.

I saw a similar problem browsing the forums where the guy fixed it himself using CSS classes. He wasn't specific on how he did this but I was wondering if anyone had any idea how he might have accomplished this.

The page I'm referencing is here:

http://www.dynamicdrive.com/forums/s...ad.php?t=35897

I'd like to further help you, but it's hard to understand exactly where you're having trouble with just based on what you've written above. It might help if you created a very simple page with the script installed, a couple of headers, and what you have so far in trying to accomplish what you're trying to accomplish.

Quote:

---

I saw a similar problem browsing the forums where the guy fixed it himself using CSS classes.

---

Please see this thread: http://www.dynamicdrive.com/forums/s...ad.php?t=36915

lol Well I'll be damned, ddadmin. I'm not at work anymore right now but I checked out that thread you linked me to. It's interesting because I never tried it out quite that way so I'll have to give it a try. If that works out then I can't see why I'd need to change anything else in the JS.

On the other hand, if it doesn't, I'll type up a sample page tomorrow like you had suggested since the only place I have the index files for this site are on my station at the office.

Thanks again and I think we might be on to something!

Well, as promising as it looked, I couldn't get the classes to work in my favor. Every time I attempted to embed the menu-specific ID to the .menuheader class, none of the styles I told it to have on the ID showed until I took it out of the class.

The weird thing is that what is described in that thread is exactly what I want and the solution you proposed seemed like an ideal solution, it just didn't turn out that way when I put it in. Maybe I forgot something vital when working with this script.

Anyways, I promised a sample page in case that didn't work and it didn't.

Thing is, I can't actually host anything until this site is completed, so I thought the next best step would be to just post my code. Maybe that way you can troubleshoot exactly why it isn't working.

I've left it in rough draft form, and this is how it looks after a couple of hours of constant failures attempting the remedy described in the other thread.

Code:

---

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

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


<script type="text/javascript">


ddaccordion.init({
        headerclass: "expandable", //Shared CSS class name of headers group that are expandable
        contentclass: "categoryitems", //Shared CSS class name of contents group
        revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click" or "mouseover
        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
        onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
        animatedefault: false, //Should contents open by default be animated into view?
        persiststate: true, //persist state of opened contents within browser session?
        toggleclass: ["menuheader", "openheader"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
        togglehtml: ["prefix", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
        animatespeed: "normal", //speed of animation: "fast", "normal", or "slow"
        oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
                //do nothing
        },
        onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
                //do nothing
        }
})


</script>

<style type="text/css">

.arrowlistmenu{
width: 160px; /*width of accordion menu*/
}

.arrowlistmenu .menuheader{ /*CSS class for menu headers in general (expanding or not!)*/
font: bold 14px Arial;
margin-bottom: 10px; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 4px 0 4px 10px; /*header text is indented 10px*/
cursor: hand;
cursor: pointer;
}

#menu_school .menuheader{
background:url(schoolinfo_noclick.png);
}

.arrowlistmenu ul{ /*CSS for UL of each sub menu*/
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/
}

.arrowlistmenu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
}

.arrowlistmenu ul li a{
color: #A70303;
background: url(arrowbullet.png) no-repeat center left; /*custom bullet list image*/
display: block;
padding: 2px 0;
padding-left: 19px; /*link text is indented 19px*/
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid #dadada;
font-size: 90%;
}

.arrowlistmenu ul li a:visited{
color: #A70303;
}

.arrowlistmenu ul li a:hover{ /*hover state CSS*/
color: #A70303;
background-color: #F3F3F3;
}

.openclass{
font:Arial, Helvetica, sans-serif;
}


</style>

</head>

<body>
<div class="arrowlistmenu">

<div class="menuheader expandable" id="menu_school">asdf</div>
<ul class="categoryitems">
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C1/">Horizontal CSS Menus</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Vertical CSS Menus</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/">Image CSS</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C6/">Form CSS</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C5/">DIVs and containers</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C7/">Links & Buttons</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C8/">Other</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/all/">Browse All</a></li>
</ul>

<h3 class="menuheader expandable">CSS Drive</h3>
<ul class="categoryitems">
<li><a href="http://www.cssdrive.com">CSS Gallery</a></li>
<li><a href="http://www.cssdrive.com/index.php/menudesigns/">Menu Gallery</a></li>
<li><a href="http://www.cssdrive.com/index.php/news/">Web Design News</a></li>
<li><a href="http://www.cssdrive.com/index.php/examples/">CSS Examples</a></li>
<li><a href="http://www.cssdrive.com/index.php/main/csscompressor/">CSS Compressor</a></li>
<li><a href="http://www.dynamicdrive.com/forums/forumdisplay.php?f=6">CSS Forums</a></li>
</ul>

<h3 class="menuheader expandable">JavaScript Kit</h3>
<ul class="categoryitems">
<li><a href="http://www.javascriptkit.com/cutpastejava.shtml" >Free JavaScripts</a></li>
<li><a href="http://www.javascriptkit.com/javatutors/">JavaScript tutorials</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li>
<li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>
<li><a href="http://www.javascriptkit.com/dhtmltutors/">DHTML & CSS</a></li>
</ul>

<h3 class="menuheader" style="cursor: default">FeedBack</h3>
</div>

</body>
</html>

---

As you can see, the image pair in question is schoolinfo_yesclick.png and schoolinfo_noclick.png. This is only the first image pair of about four. This page isn't my actual page, but the sample one I mentioned before where the only DIV is in the first example. My next image pair was going to be guidance_yesclick.png and guidance_noclick.png but I wasn't about to post up both when I couldn't even get one to work. If you find there is something here that is easily fixable and could explain why nothing seems to produce the desired result I'd be thankful.

As for giving a visual example of what I'm trying to do, the best I could provide you with is an image, as I'm not sure of any sites off the top of my head that do exactly what it is I want.


EDIT: Please ignore the random dead classes and whatnot that I forgot to delete in my styles. I'm perfectly aware of their presence, I just didn't see the need to clean the page up before I sent it. The issue at hand is getting these image pairs to work nicely with each other and as it stands right now, I can't even get one ID to acknowledge that I want a certain image as the background, so please assist any way you can.

Quote:

---

Well, as promising as it looked, I couldn't get the classes to work in my favor. Every time I attempted to embed the menu-specific ID to the .menuheader class, none of the styles I told it to have on the ID showed until I took it out of the class.

---

Ok, there was an error in the CSS I posted in the other thread (now corrected). Basically, there should be no places between the two selectors:

Code:

---

#menu_news.openclass{
background: url("a1.gif")
}

---

Try that...

Ok, so...

I did what you said, having corrected the CSS and all, and it produced different results. Now I can get a different background for each header. I cannot, however, make the toggleclass function work.

I clearly have a class set for what the button needs to be contracted and expanded, and I even set the classes to be called what they are in your example for simplicity. Oddly enough, the button ends up being what I want it to until I click on it, then it disappears completely while its menu drops down. The button reappears if I click on a different header and expand a new list.

This is odd, but seems to be nothing more than the toggeclass function getting ignored. Either that, or for some reason my .openclass styles aren't registering. Whatever it is, I definitely don't have my second image appearing when it should.


I'll include the modified code for troubleshooting. Note the correction in the CSS, but I encourage you to test it yourself. Make a sample image and insert where mine are so maybe you can see what I'm talking about.

Code:

---

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

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


<script type="text/javascript">


ddaccordion.init({
        headerclass: "expandable", //Shared CSS class name of headers group that are expandable
        contentclass: "categoryitems", //Shared CSS class name of contents group
        revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click" or "mouseover
        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
        onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
        animatedefault: false, //Should contents open by default be animated into view?
        persiststate: true, //persist state of opened contents within browser session?
        toggleclass: ["closeclass", "openclass"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
        togglehtml: ["prefix", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
        animatespeed: "normal", //speed of animation: "fast", "normal", or "slow"
        oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
                //do nothing
        },
        onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
                //do nothing
        }
})


</script>

<style type="text/css">

.arrowlistmenu{
width: 160px; /*width of accordion menu*/
}

.arrowlistmenu .menuheader{ /*CSS class for menu headers in general (expanding or not!)*/
font: bold 14px Arial;
margin-bottom: 10px; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 4px 0 4px 10px; /*header text is indented 10px*/
cursor: hand;
cursor: pointer;
}

#menu_school.closeclass{
background:url(schoolinfo_noclick.png);
height:36px;
width:150px;
}

#menu_school.openclass{
background:url(schoolinfo_yesclick.png);
}

.arrowlistmenu ul{ /*CSS for UL of each sub menu*/
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/
}

.arrowlistmenu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
}

.arrowlistmenu ul li a{
color: #A70303;
background: url(arrowbullet.png) no-repeat center left; /*custom bullet list image*/
display: block;
padding: 2px 0;
padding-left: 19px; /*link text is indented 19px*/
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid #dadada;
font-size: 90%;
}

.arrowlistmenu ul li a:visited{
color: #A70303;
}

.arrowlistmenu ul li a:hover{ /*hover state CSS*/
color: #A70303;
background-color: #F3F3F3;
}



</style>

</head>

<body>
<div class="arrowlistmenu">

<div class="closeclass expandable" id="menu_school"></div>
<ul class="categoryitems">
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C1/">Horizontal CSS Menus</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Vertical CSS Menus</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/">Image CSS</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C6/">Form CSS</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C5/">DIVs and containers</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C7/">Links & Buttons</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C8/">Other</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/all/">Browse All</a></li>
</ul>

<h3 class="menuheader expandable">CSS Drive</h3>
<ul class="categoryitems">
<li><a href="http://www.cssdrive.com">CSS Gallery</a></li>
<li><a href="http://www.cssdrive.com/index.php/menudesigns/">Menu Gallery</a></li>
<li><a href="http://www.cssdrive.com/index.php/news/">Web Design News</a></li>
<li><a href="http://www.cssdrive.com/index.php/examples/">CSS Examples</a></li>
<li><a href="http://www.cssdrive.com/index.php/main/csscompressor/">CSS Compressor</a></li>
<li><a href="http://www.dynamicdrive.com/forums/forumdisplay.php?f=6">CSS Forums</a></li>
</ul>

<h3 class="menuheader expandable">JavaScript Kit</h3>
<ul class="categoryitems">
<li><a href="http://www.javascriptkit.com/cutpastejava.shtml" >Free JavaScripts</a></li>
<li><a href="http://www.javascriptkit.com/javatutors/">JavaScript tutorials</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li>
<li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>
<li><a href="http://www.javascriptkit.com/dhtmltutors/">DHTML & CSS</a></li>
</ul>

<h3 class="menuheader" style="cursor: default">FeedBack</h3>
</div>

</body>
</html>

---

Scratch that last post, as long as you set the dimensions in the second class it seems to work.

Thanks for all of your help, ddadmin.

I kind of thought we weren't going to figure this out a couple of times. You're awesome for taking it to the end.

I want to say its fixed now. :D

I'll post back here if I have anymore problems.