Skip to Main Content
Posted on

How to preserve selected jQuery accordion after submit

Category APEX and jQuery

Here is how you can preserve selected jQuery accordion after submit. I have used hidden page item to hold selected accordion index. First, you need create regions and setup jQuery accordion.

Then create hidden page item:

  • Display As: Hidden
  • Source Used : Only when current value in session state is null
  • Source Type: Static Assignment (value equals source attribute)
  • Source value or expression: 0
  • Default value: 0
  • Default Value Type: Static Text with Session State Substitutions

Then add to jQuery accordion option "active" and event "change". Here is example JavaScript where Px_ACTIVE is your hidden item name:

<script type="text/javascript">
$(function(){
 $("#accordion").accordion({
  header:"h2",
  collapsible:true,
  active:&Px_ACTIVE.,
  change:function(e,u){
   var a=new htmldb_Get(null,&APP_ID.,"APPLICATION_PROCESS=DUMMY",&APP_PAGE_ID.)
   a.add("Px_ACTIVE",u.options.active);
   var r=a.get();
  }
 });
});
</script>

See more info about jQuery accordion from jQuery UI Demos & Documentation.

Comments

  • Jari Laine 13 Nov 2014

    Hi Mark,

    Example JavaScript do have those options for jQuery UI accordion.

    This blog post is quite old and I did probably write it for APEX 4.0 or 3.2.


    It might help if you explain in detail what you really try archive, what is APEX version you working with and post some example on apex.oracle.com.

    Regards,
    Jari

  • Mark BT52 13 Nov 2014

    Thanks Jari, but I mean how are you using it in Apex. How are you adding that code to the Accordion? A DA on the Accordion region? If so, on what event.

    (I'm using it in page zero by the way)

    Thanks for your help

    Regards

    Mark

  • Jari Laine 13 Nov 2014

    Hi Mark,

    Please see jQuery UI documentation for Accordion Widget

    Regards,
    Jari

  • Mark BT52 12 Nov 2014

    Hi, can you clarify what ' Then add to jQuery accordion option "active" and event "change" ' means?

  • Jari Laine 12 Sep 2014

    Hi Nani,

    You need reset item session state where active tab index is saved.

    Regards,
    Jari

  • Nani 12 Sep 2014

    Hi,

    Your Example is simply Superb. Small Doubt. after submit it takes back to the Active tab and when we come back to that from another page. It still shows the active tab. Can you please help me how to get back to the default 0 tab.

  • Jari Laine 9 Oct 2013

    Hi Scott,

    How it do not work? Any errors?

    Please create example to apex.oracle.com

    Regards,
    Jari

  • scott 9 Oct 2013

    Jari,

    I need your help. i created standard jquery accordion in apex 4.1 and it works correct but now i do the same in 4.2 with theme 22 but it doesn't work can you pls tell me what might be the problem, i've search all over but no idea what the problem here..thank you.

  • Jari Laine 24 Jul 2012

    Hi Alexandr,

    When I run your page I can see JavaScript errors. Take Firefox and Firebug add-on and check from console those JavaScript errors.

    Regards, Jari

  • Malysh 24 Jul 2012

    Hi Jari, I tried this code in my application in dynamic action but its not working.

    http://apex.oracle.com/pls/apex/f?p=42611:LOGIN:895932448153901

    username/password: demo/demo Plase help me. Regards, Alexandr