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 | 147846 | 11 min 36 sec ago |
Visualize
Check them out!
Comments
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?
Hi,I have an issue with this accordion tab script.
I am able to set up the accordion fine on ASP.NET site. However, i noticed that whenever I do a postback (submit button onclick), the tab always reverts to the original 1st tab. I would like to have the default tab remain at the last opened tab, rather than defaulting to the original 1st tab.
new Accordian('accordianContent',5,'headerActive') also does not offer any way to dynamically set the default tab to the last opened tab, but always reverts to the topmost tab.
Is there anyway to do this?i've been stumped for days.
help! thank you!
I am a novice but would love to install this script. Are there step by step instructions on how to upload it.
Post new comment