A is for APEX and Accordion

I had someone internal at Oracle ask for an Accordion widget in APEX. I figured everybody else code use something like this so I figured I'd build out an example in the standard place.

I think the best and easiest way to do this is to base it on a Report Row Template.

There are some caveats to this example.

The first being that #REGION_STATIC_ID# isn't properly substituted in a Report Row Template, I put it in anyway since at some point it will be. All you have to do is surround the report with element with an id or give the report itself an id , this actually isn't a bad idea as I figure most people will only want one of these per page.

The second is if you put multiple accordions on a page the row id has to be unique which is pretty easy to do in the SQL statement.

The accordian can be instatied on page load like this
pAccordian = new Accordion('accordion',true);

The first parameter is the id for the surrounding element.
The second parameter chooses between firing onmouse over (true) or onclick (false).

So here you go,




  1. Patrick Wolf said...
    Carl, nice accordion example! I like the clickable one more, because the other one is to hectic when you just move your mouse around.

    John Scott said...
    Yeah I agree, very nice example. A nice addition to the mouseover one would be a delay (e.g. 500ms) so that it doesn't automatically expand until you leave your cursor over it for that period of time.
    pay per head service said...
    I really enjoy reading the post, thanks for sharing I really like it, I already bookmarked it, thank you guys.
    Anonymous said...
    Good job. Thanks for sharing such a good post.
    click here
    Anonymous said...
    Healthybodyinc phytoceramide said...
    Yep My partner and i acknowledge, comfortable illustration. A good improvement on the mouseover just one would be a wait (e. h. 500ms) in order that it does not automatically grow until you abandon the cursor in excess of this with the period of time.Healthybodyinc phytoceramide

Post a Comment