Implementasi jQueryUI Accordion

Implementasi jQueryUI Accordion pada dasarnya sama dengan ketika implementasi jQueryUI Tabs.
Yang berbeda adalah sbb:

• Pada bagian template definition :

<div id="#REGION_STATIC_ID#" #REGION_ATTRIBUTES#>
#BODY##SUB_REGION_HEADERS##SUB_REGIONS#
</div>

<link rel="stylesheet" href = "/i/libraries/jquery-ui/1.8/themes/
ui-lightness/jquery-ui.css" type="text/css" />
 
<script src="#IMAGE_PREFIX#libraries/jquery-ui/1.8/ui/minified/jquery.ui.accordion.min.js" type="text/javascript"></script>

• tambahkan pula function js untuk menyimpan cookies state (supaya ketika di submit posisi yang terbuka tetap pada section yang sama). Serta memakai icon custom

 
<script type="text/javascript">
apex.jQuery(function() {
  apex.jQuery("##REGION_STATIC_ID#").accordion({cookie:{expires:1}});
});
jQuery(function($) {
    var userpanel = $("##REGION_STATIC_ID#");
    var index = $.cookie("accordion");
    var active;
    if (index !== undefined) {
        active = userpanel.find("h3:eq(" + index + ")");
    }
    userpanel.accordion({
        header: "h3",
        event: "hoverintent",autoHeight: true,animated: 'bounceslide',collapsible: true,fillSpace: false, 
        active: active,
        change: function(event, ui) {
            var index = $(this).find("h3").index ( ui.newHeader[0] );
            $.cookie("accordion", index);
        }
    });
});

</script> 

<script>
 $(function() {
  var icons = {
   header: "ui-icon-circle-arrow-e",
   headerSelected: "ui-icon-circle-arrow-s"
  };
  $( "##REGION_STATIC_ID#" ).accordion({
   icons: icons
  });
  $( "#toggle" ).button().toggle(function() {
   $( "##REGION_STATIC_ID#" ).accordion( "option", "icons", false );
  }, function() {
   $( "##REGION_STATIC_ID#" ).accordion( "option", "icons", icons );
  });
 });
 </script>

• Pada bagian Sub Region template :

 <h3><a href="#">#SUB_REGION_TITLE#</a></h3>
<div>#SUB_REGION#</div>

• catatan region child yang akan memakai parent jQuery accordion sebaiknya memakai no template.
• Demo hasil di sini
• Eksplorasi lebih lanjut silahkan pelajari di sini

Oke sekarang kita lihat hasilnya

source awal : Thanks Patrick Wolf for sharing on oracle forum