Simple Javascript Accordions
Thu, 10/09/2008 - 15:05 — dfadmin
External URL:
Javascript accordians have been used a lot in todays web design world. There are a lot of scripts we have seen and sure you too would have seen them.
We hope our script is one of the smallest accordion script which is extremely simple and easy to integrate. Does’nt require any framework and fully cross-browser compatible.
- The SMALLEST Accordion Javascript ( 1,149 bytes )
- Easy Integration.
- Does’nt require any Framework.
- Can be used as a Tab system ( sample in the demo )
- Fully Cross-Browser Compatible
- Source Files Included.
Below is the snippet to control the accordion.
<body onload=”new Accrodian(’my-menu’,5,’heighlight’);”>
which is in form of:
<body onload=”new Accordian(’container of your accordion’,speed,’highlighted accordion class name’);”>
| Attachment | Size | Hits | Last download |
|---|---|---|---|
| Simple Javascript Accordions | 8.14 KB | 148189 | 13 min 44 sec ago |
Visualize
Check them out!
Comments
I tried your accordian.
Works really nice Fireofox.
With IE9 it was not that nice.
Do you know how to solve it.
Best regards
Mikael Andersson
Doesn't work with Magento Go. Breaks the drop down menus and tabs in the store view.
This is great!
However, the accordion-src.js doesn't work like the packed version. It does highlight the preselected header but shows no content (unless you click the header). I can't fix this - any idea?
Thanks,
Daniel
This is so awesome, thank you so very much.
basecandy
script ate my code...
To all the people having problems setting up multiple instances, the problem is simple to solve.
First of all, define different ids for the parent container and initialize both, i.e.:
- you need to have a parent div element with id="menu1" and a parent div with id="menu2" for the second menu
- init both: new Accordian('menu1',5,'header_highlight'); new Accordian('menu2',5,'header_highlight');
- add those ids to the css, on the basic-accordian class, ex: #basic-accordian, #menu1, #menu2 { ...}
Next, be sure to have unique ids for the menu entries. If in the first menu you define "test-header" and "test-content", "test1-header1" and "test1-content", etc., you cannot repeat them in the second menu. Give them diffent prefixes, but remenber that when you click on a whateverName-header, it will show/hide whateverName-content.
To all the people having problems setting up multiple instances, the problem is simple to solve.
First of all, define different ids for the parent container and initialize both, i.e.:
- you need to have
- add those ids to the css, on the basic-accordian class, ex: #basic-accordian, #menu1, #menu2 { ...}
Next, be sure to have unique ids for the menu entries. If in the first menu you define "test-header" and "test-content", "test1-header1" and "test1-content", etc., you cannot repeat them in the second menu. Give them diffent prefixes, but remenber that when you click on a whateverName-header, it will show/hide whateverName-content.
Hi
Great tool.
Thanks for sharing.
I have the same question as Anon.. on Jan 13.
How do you load multiple instances of the Accordian on a single page? I have tried to nest it and it does not work. Any suggestions would be appreciated, in the meanwhile I will see what I can do to accomplish this.
Thank you in advance,
How do you load two different accordions (one common, the other tabbed) on the same page?
Sounds good ZoSo74, but does not work for me, Fastest Android Phone can you post entire js, since I maybe messing up somewhere?
Post new comment