#{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'/}