#{extends 'jqueryui/layout.html'/} #{set title:'Accordion'/}

Accordion - lazy loading

Use an accordion to define content sections and lazily load the content when the section is opened.

Demo

#{include 'jqueryui/Accordion/div.html'/}

Client

The widget is based on a DIV that contains headings, using the data-url attribute value for the server-side data source.

#{includeVerbatim 'jqueryui/Accordion/div.html'/}

The accordion.js JavaScript applies the jQuery UI accordion plug-in to this DIV.

#{includeVerbatim '/public/javascripts/accordion.js'/}

Note the empty action method parameter value, in the DIV element, which generates the query string part of the URL. It would be straightforward to modify accordion.js to use a data-url attribute on each h3 element to specify the URL for each section.

Server

The server-side starts with a trivial controller that simply renders a view for one location..

#{includeVerbatim 'app/controllers/jqueryui/Accordion.java'/}

The region(String header) action renders an HTML content section for the clicked header (e.g. ‘Africa’), from the template region.html, whose output is simply a comma-separated list of region names:

#{includeVerbatim 'jqueryui/Accordion/region.html'/}