Oat Accordion Demo

The Accordion component uses native <details> and <summary> elements. It allows for collapsible content sections, and can be configured to allow only one section to be open at a time (exclusive grouping).

Accordion Item 1

This is the content for the first item. It's hidden by default.

Accordion Item 2

This is the second item. You can add any Wicket component inside the content.

Accordion Item 3

Third item content. Note how opening one closes the others due to the exclusive group behavior.

How to use

The OatAccordion component is a specialized ListView. It automatically manages the grouping logic.

// Java - In your Page or Panel
add(new OatAccordion<MyData>("accordion", model) {
    @Override
    protected void populateItem(ListItem<MyData> item) {
        MyData data = item.getModelObject();
        item.add(new Label("title", data.getTitle()));
        item.add(new Label("content", data.getContent()));
    }
});

<!-- HTML - Markup: attach to the <details> tag -->
<details wicket:id="accordion">
    <summary wicket:id="title">Item Title</summary>
    <div wicket:id="content">Item Content</div>
</details>