Accordion Script Problems

Printable View

Show 40 post(s) from this thread on one page

09-25-2008, 12:09 AM
prisonsong

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!
09-25-2008, 12:49 PM
prisonsong

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.
09-25-2008, 07:32 PM
ddadmin

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...
09-26-2008, 11:00 AM
prisonsong

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>
09-26-2008, 11:05 AM
prisonsong

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.

Show 40 post(s) from this thread on one page