accordion css control?

Does anyone have any good examples of an accordion css control?  I basically need to have 3 sections be completely collapsed on page load, then "open" when clicked on, and have linked content underneath that pushes any content under the control downward.   I can explain more/better if I need to. Also, I know I could probably build this on my own, but I just don't have that kind of time to work out the kinks, so one that is just a plug and play would be awesome.  I don't mind paying if need be. Thanks, Ray

Like this? http://www.projectseven.com/products/menusystems/tmm/index.htm ________________________________ Sent: Tue 10/3/2006 11:19 AM To: CF-Talk Subject: accordion css control? Does anyone have any good examples of an accordion css control?  I basically need to have 3 sections be completely collapsed on page load, then "open" when clicked on, and have linked content underneath that pushes any content under the control downward. I can explain more/better if I need to. Also, I know I could probably build this on my own, but I just don't have that kind of time to work out the kinks, so one that is just a plug and play would be awesome.  I don't mind paying if need be. Thanks, Ray

Yea, that would be a good example.  I'll look into it further.  I'd still love some more examples that others have used so I can present more than one solution.... ----- Excess quoted text cut - see Original Post for more ----- basically > need to have 3 sections be completely collapsed on page load, then "open" > when clicked on, and have linked content underneath that pushes any content ----- Excess quoted text cut - see Original Post for more ----- play ----- Excess quoted text cut - see Original Post for more -----

http://www.indiankey.com/mxajax/examples/mxRicoAccordion1.cfm > Yea, that would be a good example.  I'll look into it further.  I'd still > love some more examples that others have used so I can present more than one > solution.... -- CFAJAX docs and other useful articles: http://www.bifrost.com.au/blog/

Hrm, and it only works with DreamWeaver?  I'm liking that one less already... ----- Excess quoted text cut - see Original Post for more ----- basically > need to have 3 sections be completely collapsed on page load, then "open" > when clicked on, and have linked content underneath that pushes any content ----- Excess quoted text cut - see Original Post for more ----- play ----- Excess quoted text cut - see Original Post for more -----

Ray Champagne wrote: > Does anyone have any good examples of an accordion css control?  I basically > need to have 3 sections be completely collapsed on page load, then "open" > when clicked on, and have linked content underneath that pushes any content > under the control downward.   > I think this is what you are looking for... http://www.dynamicdrive.com/dynamicindex1/switchmenu.htm I've used that one before, and it is pretty easy to customize.

No IDE needed, and free, too.  Now we're talking... :) > Importance: High > > Ray Champagne wrote: > > Does anyone have any good examples of an accordion css control?  I basically > > need to have 3 sections be completely collapsed on page load, then "open" > > when clicked on, and have linked content underneath that pushes any content ----- Excess quoted text cut - see Original Post for more -----

I like this - easy to customize and xml source makes the hierarchy really readable http://www.devx.com/getHelpOn/Article/11874/0/page/1 No IDE needed, and free, too.  Now we're talking... :) > Importance: High > > Ray Champagne wrote: > > Does anyone have any good examples of an accordion css control?  I basically > > need to have 3 sections be completely collapsed on page load, then "open" > > when clicked on, and have linked content underneath that pushes any content ----- Excess quoted text cut - see Original Post for more -----

Check this one out: http://moofx.mad4milk.net/ Its fast and easy to code into. Chris No IDE needed, and free, too.  Now we're talking... :) > Importance: High > > Ray Champagne wrote: > > Does anyone have any good examples of an accordion css control?  I basically > > need to have 3 sections be completely collapsed on page load, then "open" > > when clicked on, and have linked content underneath that pushes any content ----- Excess quoted text cut - see Original Post for more -----

Wow, that thing is pretty damned fast. ----- Excess quoted text cut - see Original Post for more -----

Just for a quick and dirty example here on how to use it: Include the necessary js files:   <script type="text/javascript" src="js/prototype.lite.js"></script>   <script type="text/javascript" src="js/moo.fx.js"></script>   <script type="text/javascript" src="js/moo.fx.pack.js"></script>   <script type="text/javascript" src="js/niftycube.js"></script> Stick something like this in a javascript:   <script type="text/javascript">         window.onload = function(){         //we define two arrays, containing our toggles and divs.     var myDivs = document.getElementsByClassName('stretcher');     var myLinks = document.getElementsByClassName('stretchtoggle');       //then we create the effect.     myAccordion = new fx.Accordion(myLinks, myDivs, {opacity: true});     // I stuck nifty corners into the mix, they work together and look perfect     Nifty("li.stretchtoggle h3","top");     Nifty("div.stretcher","bottom");     Nifty("td.navCell","");     Nifty("td.searchResults","");     Nifty("div#stopoff","big");     Nifty("div#headingRow","transparent");       // Show the 1st accordian as open if you want too by default     myAccordion.showThisHideOpen(myDivs[0]);     </script> Then create your data like this: <ul>   <li class="stretchtoggle">They would click on this text to open it     <div class="stretcher">       This would be opened after they click     </div>   </li>   <li class="stretchtoggle">They would click on this text to open it (2nd link)     <div class="stretcher">       This would be opened after they click     </div>   </li> </ul> Have fun, Chris

The one included in Spry is worth a look: http://labs.adobe.com/technologies/spry/articles/accordion_overview/ ----------------------------   Massimo Foti Tools for ColdFusion and Dreamweaver developers: http://www.massimocorner.com ----------------------------  

The guys at Mad4Milk have a new version which doesn't rely on Prototype. You can catch it here: http://mootools.net/ Rey... Peterson, Chris wrote: ----- Excess quoted text cut - see Original Post for more -----

Forgive my ignorance, but what would the drawback be to "relying on Prototype".  (in other words, I have no idea what prototype is). ----- Excess quoted text cut - see Original Post for more -----

prototype aka prototype.js is a JavaScript library for multi-browser support on httprequest calls used commonly for AJAX. Teddy ----- Excess quoted text cut - see Original Post for more -----

To follow up on this, I have used jAccordion by Joe Reinhart in the past, but he no longer supports it, and it has a quirk that won't work for my client (one pane always is open when the page loads).  You can see the demo I whipped up here: http://tinyurl.com/qhudp > Importance: High > > Does anyone have any good examples of an accordion css control?  I basically > need to have 3 sections be completely collapsed on page load, then "open" > when clicked on, and have linked content underneath that pushes any content ----- Excess quoted text cut - see Original Post for more ----- play ----- Excess quoted text cut - see Original Post for more -----

Yeah, good set that, there are also a few effects in the script.aculo.us library.  In fact moofx may also use stuff from that library.. Would have to check. "This e-mail is from Reed Exhibitions (Gateway House, 28 The Quadrant, Richmond, Surrey, TW9 1DN, United Kingdom), a division of Reed Business, Registered in England, Number 678540.  It contains information which is confidential and may also be privileged.  It is for the exclusive use of the intended recipient(s).  If you are not the intended recipient(s) please note that any form of distribution, copying or use of this communication or the information in it is strictly prohibited and may be unlawful.  If you have received this communication in error please return it to the sender or call our switchboard on +44 (0) 20 89107910.  The opinions expressed within this communication are not necessarily those expressed by Reed Exhibitions." Visit our website at http://www.reedexpo.com Check this one out: http://moofx.mad4milk.net/ Its fast and easy to code into. Chris No IDE needed, and free, too.  Now we're talking... :) > Importance: High > > Ray Champagne wrote: > > Does anyone have any good examples of an accordion css control?  I basically > > need to have 3 sections be completely collapsed on page load, then "open" > > when clicked on, and have linked content underneath that pushes any content ----- Excess quoted text cut - see Original Post for more -----

Rey Bango wrote > The guys at Mad4Milk have a new version which doesn't rely on > Prototype. > You can catch it here: > > http://mootools.net/ The moo menu is pretty damned good & one of the best you'll get for free in my opinion. Here's another one that's up there: http://onlinetools.org/tools/dom-tree-menu-puredom/   This guy is heavily into unobtrusive JS and most of his stuff is pretty standards compliant. That was just for the tree menu, but Chris has also done something similar to the moo menu called domCollapse: http://www.wait-till-i.com/index.php?p=72 And last but not least: http://www.kryogenix.org/code/browser/aqlists/ HTH Mark -- This message has been scanned for viruses and dangerous content by ISPNZ's automated virus detection system, and is believed to be clean.