Skip to Main Content

APEX

Announcement

For appeals, questions and feedback about Oracle Forums, please email oracle-forums-moderators_us@oracle.com. Technical questions should be asked in the appropriate category. Thank you!

Using jQueryUI Accordion with APEX 4.0

Patrick Wolf-OracleJul 15 2010 — edited May 18 2015
Hi,

because I was asked in another thread how to add jQuery Accordions to an APEX application. It's super easy with the new "Sub Region" feature and a corresponding region template. As you can see from my example at http://apex.oracle.com/pls/apex/f?p=2672:5 you will notice that you can use any region type for an accordion. I used a list, classic report and a region with a page item.

But here are the instructions so that you can add it to your own application.

1) Create a new template of type "Region" (Shared Components\Templates)
a) create one from scratch
b) Name: jQueryUI Accordion
c) Template Class: Custom 2
d) Template:
<div id="#REGION_STATIC_ID#" #REGION_ATTRIBUTES#>
#BODY##SUB_REGION_HEADERS##SUB_REGIONS#
</div>
<link rel="stylesheet" href="#IMAGE_PREFIX#libraries/jquery-ui/1.8/themes/base/jquery.ui.accordion.css" type="text/css" />

<script src="#IMAGE_PREFIX#libraries/jquery-ui/1.8/ui/minified/jquery.ui.accordion.min.js" type="text/javascript"></script>

<script type="text/javascript">
apex.jQuery(function() {
  apex.jQuery("##REGION_STATIC_ID#").accordion();
});
</script>
e) Sub Regions - Template:
<h3><a href="#">#SUB_REGION_TITLE#</a></h3>
<div>#SUB_REGION#</div>
2) On the page where you want to have an Accordion, add a new "HTML" region which acts as the container for the "accordion". Set the region template to your new "jQueryUI Accordion" template.
3) Create as many sub regions (that are the actual accordion slices). It's just important that you set the "Parent Region" to your container region you just created before. As region template I would pick "No Template" or any other template you want to have.

That's it. As you can see now from the region structure it's very obvious for any developer developer what regions are part of the jQueryUI accordion.

Regards
Patrick
Comments
Locked Post
New comments cannot be posted to this locked post.
Post Details
Locked on Nov 12 2013
Added on Jul 15 2010
15 comments
10,124 views