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).


$2.89
- OR -

Overview

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 JulyAlex 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.

See All Postings From Alex July >>

Reviews

Much better if done using DIV's

September 20, 2008 by marino baccarini

Why 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,

RE: Much better if done using DIV's

September 22, 2008 by Alex July
  1. Why each panel gets bigger once opened?
    Are you referring to animation. You can skip animation step if you like.
  2. At the time of writing there was no Spry Accordion.
  3. Spry Accordion has a number of issues (huge file size, rendering issues, etc.)
  4. DIVs would be better indeed ... if you are looking to spend more time and get less predictable results across browsers :-)

    Thanks for the comments.

You must me logged in to write a review.