This discussion is archived
1 2 Previous Next 15 Replies Latest reply: Oct 15, 2013 9:02 AM by Sidney França RSS

Using jQueryUI Accordion with APEX 4.0

Patrick Wolf Employee ACE
Currently Being Moderated
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
1 2 Previous Next