Simple Javascript Accordions
Thu, 10/09/2008 - 01:35 — dfadmin
Virtual Img:
One Line Description:
Lightweight Accordion JS
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 | 83634 | 2 min ago |
Sponsors
Comments
The script works great by itself, but when I inserted it to my web page which has other scripts, it just did not work well together. It seems to load okay at first, but when I click on any tab, the content keeps scrolling non-stop. Do you have any idea what might be the problem?
Thank you.
I have the same problem but I try to delete other scipts and nothing!
) the other files, like index.php, loads the script but if I try to click on tabs the content scrolls non-stop. If I put the entire code of the header in each single file, all returns to work well.I have a blogsite with wordpress and I have embeded this code in order to show posts with the accordion method. I have made single files like header.php, index.php etc. and the problem is that if I have a different file for header (that include from DOC Type to
Why there is this problem working wth multiple files?
If you want the content of the accordians to be invisible while the page is loading just set the div containing the content to display:none, easy as that!
Just what I've been looking for, for a while now.
I've seen others but this seems lightweight and easy to use.
Thanks :D
If you want the single accordeon divs to stay open, just raplace the original onclick fundtion with this one.
h.onclick = function(){
for(i=0;i
n=cn.substr(0,cn.indexOf('-'));
if((n+'-header')==this.id && dsp($(n+'-content'))=='none'){
ex($(n+'-content'));
n=$(n+'-header');
cc(n,'__');
n.className=n.className+' '+n.tc;
}else if((n+'-header')!=this.id && dsp($(n+'-content'))=='block'){
ex($(n+'-content'));
n=$(n+'-header');
cc(n,'__');
n.className=n.className;//+' '+n.tc;
}else if((n+'-header')==this.id && dsp($(n+'-content'))=='block'){
cl($(n+'-content'));
cc($(n+'-header'),'');
}
}
}
Hi, thanks for great code. However there is a bug in src version (but not in packed one). When you click serval times in selected div highlight style keeps appending (accordion_headings header_highlight header_highlight header_highlight header_highlight ...). Since I had to make some adjustments to the code I had to unpack your code (hope you don't mind).
Great component, so simple and small! Thank you, dezinerfolio :)
Great Menu and easy to implement. Thanks for making this available!
I was wondering if there's a way to open the panels with text links elsewhere on the page instead of clicking on the panels? If anyone can help me with that, I would be eternally grateful. Thank you so much!
Okay, I've read through all 52 pages, and I'm still having problems making the accordions open via links on the same page instead of clicking on the accordion headers themselves. Please help, someone.
I've noticed that when I put images into my accordion and open up the page, the accordion is fully expanded until all of the images are finished loading. Am I doing something wrong?
Post new comment