Did you know ... Search Documentation:
Pack weblog -- prolog/nav/accordion.pl
PublicShow source
 accordion(+Options:list, +HTML:html)// is det
Emit an accordion widget.

Works with library(http/html_write)

Uses the JQuery library

accordion has a structural similarity to the html ordered list tag
<OL>
     <LI>First Thing</LI>
     <LI>Second Thing</LI>
</OL>
in that an accordion expects a list of \accordion_section//2 inclusions

Example:

       thing_with_accordion -->
          html([
             h2('All of Acmes Fine Products'),
             \accordion([sortable(true)], [
                 \accordion_section('Acme Products #133 Portable Hole', [
                      p(img(src='portablehole.png', []),
                         'The Best hole for the money'),
                      p('Not recommended for use by coyotes')
                      ]),
                  ...
                  \accordion_section('Acme Products #17 Nuclear Bomb', [
                      p(img(src='nuke.png', []),
                         '27Kiloton Nuclear Bomb'),
                      p('The best road runner blaster on themarket') ])
             ])

Options:

  • collapsible(Collapsible) By default, accordions always keep one section open. To allow the user to close all sections set collapsible(true).
  • inactive(Class) If present, the option active(atom) is required. Inactive headers will receive the atom as an additional class.
  • active(Class) If present, the active(atom) is required. Inactive headers will receive the atom as an additional class.
  • height(Style)
    Because the accordion is comprised of block-level elements, by default its width fills the available horizontal space. To fill the vertical space allocated by its container set height(fill). To consume only as much space as is needed for content, set height(content) (the default). NOTE: If the containing box is resized after initial draw
    
     $( "#accordion" ).accordion( "refresh" );
    

    must be called. See http://jqueryui.com/accordion/#fillspace

  • hover(Bool)
    Open sections on hover. NOTE: This is broken in recent versions of jQuery
  • sortable(Bool) Sections may be rearranged by dragging if sortable(true) is used, then each group of sections to be drug together must be surrounded by
          div(class=group, ... accordion_sections ... )
  • id(Name) The outer div's html id (default accordion ). Accordions sharing a page need unique IDs.
  • css(Bool) If true (default), include =/themes/base/jquery-ui.css= from the jquery CDN. Setting to false give a very bare boned H3 appearance to the headers, but does work. Set to false if you supply your own styling.

    Note: currently not implemented.

Arguments:
Options- the list of options
HTML- the termerized HTML contents, which must be a list of accordian_section//2 sections
To be done
- implement css option. hover is broken.
 accordion_section(+Header:options, +HTML:html)// is det
Create an accordion section of the given header and body.
Arguments:
Header- atom text of header. In future may accept option(OptionList)
HTML- Termerized HTML for body
See also
- accordion//2