Simple AJAX accordion
In this article we will continue on the subject of AJAX interface widgets. Today’s topic will be a simple Accordion component – an interface element allowing user to collapse and expand portions of content (further referred to as “panels”) organized in a column-like layout. External content can be loaded dynamically as the container expands (the AJAX part).
| User Level: | Any |
|---|---|
| Technologies: | JavaScript, Ajax |
| Number Of Pages: | 11 |
In addition a previously expanded container can collapse as the
current one expands to free up the screen space and eliminate
scrolling.
To add a little excitement we will animate expanding of the panels once the eternal content has been successfully loaded.
We won’t rely on any server-side technology while working on this article; however in order for AJAX part to work you will need to test the resulting web page on a web server.
Alex July
Alex July is a Vancouver-based (Canada, British Columbia) Web Developer/ Graphic Artist who has an extensive experience in both creative realms.
He is also a host of Linecraft.com where he is showcasing his skills and sharing experience with the developers community. For the past 3 years Alex has been focusing on the development of Rich Internet Applications using Macromedia Flash technology.
When away from the computer Alex is practicing Martial Arts, playing guitar and enjoying time with his wonderful family.
User Reviews
Total of 2 reviewsRE: Much better if done using DIV's
Written by Alex July on September 22, 2008Why each panel gets bigger once opened?Are you referring to animation. You can skip animation step if you like.At the time of writing there was no Spry Accordion.Spry Accordion has a number of issues (huge file size, rendering issues, etc.)DIVs ...
Much better if done using DIV's
Written by marino baccarini on September 20, 2008Why didn't you use DIV's instead of tables?Why each panels gets bigger once opened? I suppose something DW CS3 Spry Accordion alike would be more interesting.Thanks,
