Hide and Show All Regions

The use of APEX Hide and Show regions has proven to be very popular within our application. Our users want to have access to a number of sections of information on a single page but they don’t always want to see it all at once. For example, our person summary screen shows information relating to an individual’s addresses, telephone numbers, relations, aliases and other information stored within the system. Users may just want to get some basic information relating to an individual or they may want to view everything at the same time. Instead of having to expand or contract each section individually, one of our development standards dictates that if a page has more than one Hide and Show region then it must also have Show All and Hide All buttons.

The following describes how to implement Hide All and Show All functionality.

On any page with more than one Hide and Show region create two new buttons. The regions can be Forms, HTML, reports or whatever you like as long as they use the Hide and Show region template. The two new buttons should not be in a Hide and Show region else you probably won’t be able to see them!

Edit the Hide and Show region template. I’ve used theme 4 for this example, but each Hide and Show region template is similar. Locate the div tag that encloses the region, shown in red below:

<div class="t4Hide" id="region#REGION_SEQUENCE_ID#"><div class="t4ButtonHolder" > #CLOSE#&nbsp;#EXPAND##HELP##DELETE##EDIT##CHANGE##COPY# #PREVIOUS##NEXT##CREATE##CREATE2#</div><div class="t4RegionBody">#BODY#</div></div>

Add a title attribute to this div tag that will be easily identifiable by the javaScript we’re about to add e.g.:

<div class="t4Hide" id="region#REGION_SEQUENCE_ID#" title="hideShow">

Back on your page, in the HTML header of your page add the following code:

<script language="javascript">
function showHide() {
divElements = document.getElementsByTagName("div");
for(i = 0; i < divElements.length; i++){
if(divElements[i].title == "hideShow") {
if (divElements[i].style.display =="block") {
divElements[i].style.display="none";
}
else {
divElements[i].style.display="block";
}
}
}
imgElements = document.getElementsByTagName("img");
for (i = 0; i < imgElements.length; i++) {
imgSrc = imgElements[i].src;
startSrc = imgSrc.substr(0,imgSrc.indexOf("/i/"));
imgSrc = imgSrc.substr(imgSrc.indexOf("/i/"));
if (imgSrc == "/i/themes/<hidden image>") {
imgElements[i].src = startSrc+"/i/themes/<show image>";
}
else {
imgElements[i].src = startSrc+"/i/themes/<hidden image>";
}
}
return;
}
</script>

You will need to replace the bits in red with the rest of the path to the images that are used for the hide and show links on your region. This will depend on the theme you are using and is included to ensure that the correct image is displayed for the current state of the Hide and Show region. If you do not know the image path then you can just remove this loop; the Hide and Show regions will still show and hide but the images will not update.

The final step is to edit your Hide All and Show All buttons. The target should be set to “URL” and the URL is javascript:showHide(); This is the same for both buttons.

Now when you run your page you should find that by clicking these buttons all the Hide and Show regions on your page are hidden or shown simultaneously. This makes it a lot easier for your users to see all the information at once, if this is what they want.

Sara

Sara Blair is a freelance Oracle developer with over 10 years Oracle experience. She has been working with Oracle APEX for nearly 4 years since htmldb 1.5, and is available to hire through Silvercore Solutions.

1 Response to “Hide and Show All Regions”

  • Eugene says:

    looking forward for more information about this. thanks for sharing. Eugene

Comments can no longer be submitted.