Accordion

There are two Layout classes for adding an Accordion to a form. AccordionSection which wraps the contents of each section and Accordion which wraps the sections and adds the ability to open and collapse them.

You can see this form live in the Demo site.

The first argument passed to the AccordionSection is the title, followed by the list of fields or other layout objects that will shown in the section. You can add any number of fields, other layout objects or composed layouts:

There is also the optional summary keyword argument. This is a short description of the contents of a panel so the user does not need to open it:

Each Accordion on a page needs to have a unique identifier otherwise the javascript used to control the component will not function correctly. You set the identifier using the css_id keyword argument:

Accordion(
    AccordionSection(
        ...
    ),
    css_id="accordion-1"
),
...
Accordion(
    AccordionSection(
        ...
    ),
    css_id="accordion-2"
)

The default value is accordion. Tf there is only one accordion on the page you don’t need to change it.

You cannot nest Accordions. Firstly because the javascript controls don’t work - all the panels are open. Secondly, it’s visually confusing. The nested Accordion is not indented.