Accordion

See: https://www.carbondesignsystem.com/components/accordion/usage/

An accordion is a vertically stacked list of headers that reveal or hide associated sections of content.

Overview

The accordion component delivers large amounts of content in a small space through progressive disclosure. The header title give the user a high level overview of the content allowing the user to decide which sections to read.

Accordions can make information processing and discovering more effective. However, it does hide content from users and it’s important to account for a user not noticing or reading all of the included content. If a user is likely to read all of the content then don’t use an accordion as it adds the burden of an extra click; instead use a full scrolling page with normal headers.

class carbondesign.tags.accordion.Accordion(*args, **kwargs)

Accordion component.

WANT_CHILDREN = True

Template Tag needs closing end tag.

DEFAULT_TAG = 'ul'

Rendered HTML tag.

render_default(values, context)

Output html of the component.

class carbondesign.tags.accordion.AccordionItem(*args, **kwargs)

Accordion item.

WANT_CHILDREN = True

Template Tag needs closing end tag.

NODE_PROPS = ('id', 'expanded')

Extended Template Tag arguments.

DEFAULT_TAG = 'li'

Rendered HTML tag.

prepare(values, context)

Prepare values for rendering the templates.

render_default(values, context)

Output html of the component.

render_tmpl_label(values, context)

Dynamically render a part of the component’s template.