*** This post uses SyntaxHighlighter to show code, if you are on an RSS-reader you might not see the code ***
The last weeks it seemed that more people were having the same question "how to integrate an Accordion in APEX".
I've been using an Accordion for a while, an online example is on the Anychart Integration kit website. The left-hand menu is an Accordion.
I think on all my projects of the last year I've been including JQuery and JQuery UI as a standard in the template. The Accordion I use is part of JQuery UI.
My standard philosophy is "if you can make things reusable, you should do it". (with this note: if time and effort allows)
APEX has a Shared Components section and Page zero which can help you with sharing your most common used code. APEX 4.0 will go a step further and provides a plugin mechanism, so you don't need to put the code in different places anymore, instead it will handle everything for you.
So to implement my Accordion, I used a List Template to change any List into an Accordion. Here's how the APEX list template looks like:
List Template Before Rows
List Template Current
List Template Noncurrent
Between List Elements
Sub List Template Current
Sub List Template Noncurrent
List Template After Rows
The List is a normal list as you can see in the below screenshot.
In the List itself you need to add the pages in "List Entry Current for Pages Type" in order to leave the Accordion open for a child. e.g. 2D Column is page 10 and that should be in the List Entry Current for Page 5.
So in every other project you can just use this template for a list and you have an Accordion in place.