Tech, Oracle, user experience, coffee, design standards, and shameless ranting

Oracle Apex sticky hide and show regions

Recently had a need for sticky hide/show regions in Oracle Apex 4.1.

Here’s how I done it.

Add the jQuery cookie library to your page template

Added the following line to the hide and show region template

1
$.cookie('#REGION_STATIC_ID#',$('##REGION_STATIC_ID# .hide:first:visible').length);return false;

So my hide and show region template looks like this:

1
2
3
4
5
6
7
8
9
10
11
<div class="hide-show-region" id="#REGION_STATIC_ID#" #REGION_ATTRIBUTES#>
  <div class="hide-show-top">
    <div class="hide-show-title">
	<a href="#" onclick="hideShow('region#REGION_SEQUENCE_ID#','shIMG#REGION_SEQUENCE_ID#','#IMAGE_PREFIX#themes/theme_21/images/right_arrow.png','#IMAGE_PREFIX#themes/theme_21/images/down_arrow.png');$.cookie('#REGION_STATIC_ID#',$('##REGION_STATIC_ID# .hide:first:visible').length);return false;" class="t1HideandShowRegionLink">
	<img src="#IMAGE_PREFIX#themes/theme_21/images/right_arrow.png" 
  id="shIMG#REGION_SEQUENCE_ID#" alt="" />
  #TITLE#</a></div>
    <div class="hide-show-buttons">#CLOSE##PREVIOUS##NEXT##DELETE##EDIT##CHANGE##CREATE##CREATE2##EXPAND##COPY##HELP#</div>
  </div>
<div class="hide" id="region#REGION_SEQUENCE_ID#" style="float:left;">#BODY#</div>
</div>

Added this on page ready function to the footer of page 0

?View Code JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
//Hide and show regions based on cookie
$(".hide-show-region").each(function(){
$this=$(this);
//get the ID of the hide show region
$id=$this.attr("id")
//Get any cookie previously set
$cookie = $.cookie($id)
//If the region was open last time it was clicked then show it
if($cookie==1){
//alert("opening "+$id);
$child = $(".hide:first",$this);
$child.show();
}
});

Works a treat

Share
  • Hi! How do you add this to on page ready function to the footer of page 0? Page Zero does not seem to offer a footer to begin with… Thank you!

  • Hi.
    Sorry, should have been more clear. In my template, I have a region that resides in the footer. But you can add the code anywhere you like. I put all my javascript in the footer region, so the page loads slightly faster, it’s a good habit to get into. Good luck.

  • How do I “Add jquery cookie library to page template?”

  • Download the jquery cookie plug in and upload it to your files/images section in your applications shared components screen.

    To edit the page template, go to the design view of one of your applications pages, under the templates section to the right of the page click the page template, in the header definition under the #HEAD# text, paste the following.

    ?View Code JAVASCRIPT
    1
    2
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="#WORKSPACE_IMAGES#jquery.cookie.js"></script>

    Of course, if you already have a reference to jquery in your template, ignore the first line.

    That’s it. You can now use cookies in your application.

You can follow any responses to this entry through the RSS 2.0 feed.

Switch to our mobile site