Question

I would like to create my own accordion component without using any AJAX toolkits, mostly for learning purposes. I am not sure quite where to start with this one. I’m assuming I would begin by creating div’s for each section in the accordion. Perhaps each div would contain a header, which would be the actual button selected to move the accordion to that section. I am not sure the correct approach to take once an accordion’s section button is selected though. Would I use the z-order, so that each section is of a higher z-order? Any help is appreciated.

Thanks

Answer 1

I would highly recommend picking up a book such as John Resig’s Pro JavaScript techniques that will give you some ideas and initial thoughts about how to approach bulding your own client-side solutions.

Essentially, you would have an element to act as a header, for example <h1> or <div> under which you would have a <div> with an initial style of display: none;. Set up an event handler on the click event of the header to change the style of the div below to display: block and ensuring that any other content <div>s are hidden (do this by using a CSS class on each content <div> for example).

I’ll leave the smooth animation to you as an exercise for how it might be accomplished. As a hint, I would recommend looking at how a JavaScript library like jQuery handles animation, by checking out the source.