How to Add an Accordion Sidebar Menu to Delta Theme

An accordion sidebar menu is a great way to display a lot of information in a small space. Our Delta theme already ships with the necessary jQuery UI code to create an accordion and the aim of this tutorial is to show how, with just a small amount of work, you can implement this functionality in your Delta-themed APEX applications.

jQuery UI Accordions require a specific HTML structure in order to work which unfortunately isn’t straightforward to construct from one, simple APEX template. However, with careful planning, a new template and a few lines of javascript it is possible. This tutorial will show you how to extend Delta theme to turn your left sidebar regions into a slick, animated accordion menu.

First a new theme template is needed:

1. In the Application Builder go to Shared Components > Templates and click Create.
2. Select Region, then From Scratch.
3. Name your new region “Accordion Region”, make sure Delta theme is selected and set Template Class to “Custom 1″.
4. Click Create.
5. Edit the Accordion Region template and in Template Definition enter the following:

   <h3><a href="#">#TITLE#</a></h3>
   <div>#BODY#</div>

6. Click Apply Changes.

Since we are going to incorporate all regions in the left sidebar into an accordion we need to change the Template for every region in Region Position 4 to Accordion Template. Now if you run your application you should see un-styled content in the left sidebar. Next we need to initialise the jQuery Accordion.

For the sake of simplicity we will create a new javascript file specifically for the accordion, however, if you are familiar with javascript, jQuery and CSS you will see that this is not absolutely necessary, and that existing files can also be edited to achieve the same result.

1. In the delta > theme > js folder of your theme installation create a new file called delta.accordion.js
2. Add the following code to delta.accordion.js:

    $(document).ready(function() {
   	$('.ui-layout-pane-west').css('overflow', 'hidden');
   	$('#delta-layout-region-4').accordion({
   		fillSpace: true
   	});
   	pageLayout.options.west.onresize = function () {
   		$('#delta-layout-region-4').accordion('resize');
   	};
   });

3. In APEX, for each of the Delta theme page templates add the following code to the Header Definition, just before the </head> tag:

   <script type="text/javascript" src="&THEME_PATH.theme/js/delta.accordion.js"></script>

Now when you run your application you should have a fully functional accordion sidebar menu!

Let’s look at the code in delta.accordion.js in closer detail.

$(document).ready(function() {
	...
});

This is a standard jQuery practice to ensure the enclosed code is executed when the document is ready to be manipulated.

$('.ui-layout-pane-west').css('overflow', 'hidden');

To prevent unwanted scrollbars when the accordion is activated it is necessary to set the overflow of the west pane (left sidebar) to hidden. If you are familiar with CSS you can achieve the same thing by editing delta.core.css, which would make this line unnecessary.

$('#delta-layout-region-4').accordion({
	fillSpace: true
});

This initialises <div id=”delta-layout-region-4″> and its contents as a jQuery UI accordion and automatically sets its height to the maximum available. Many more options are available in the accordion documentation.

pageLayout.options.west.onresize = function () {
	$('#delta-layout-region-4').accordion('resize');
};

Finally, this line adds a callback function to the west pane onresize event. This code triggers the accordion to resize every time the west pane is resized, ensuring that it always fills all of the available space.

This tutorial is intended to give customers who have bought Delta theme a working example of an accordion sidebar menu. Of course, there are many other ways to achieve the same result and it is always best to first consider your specific circumstances before making changes to your application or theme files.