#{extends 'jqueryui/layout.html'/} #{set title:'Accordion'/}
Use an accordion to define content sections and lazily load the content when the section is opened.
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.
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'/}