## Accordion Use the Accordion and AccordionX components to toggle between hiding and showing large amount of content. Category: Data Display ### Introduction ### Multiple Items Set `multiple=True` to enable opening multiple items. ```python import dash_mantine_components as dmc dmc.Accordion( children=[...], multiple=True ) ``` ### Custom Accordion Label ```python import dash_mantine_components as dmc from dash import html characters_list = [ { "id": "bender", "image": "https://img.icons8.com/clouds/256/000000/futurama-bender.png", "label": "Bender Bending Rodríguez", "description": "Fascinated with cooking, though has no sense of taste", "content": "Bender Bending Rodríguez, (born September 4, 2996), designated Bending Unit 22, and commonly " "known as Bender, is a bending unit created by a division of MomCorp in Tijuana, Mexico, " "and his serial number is 2716057. His mugshot id number is 01473. He is Fry's best friend.", }, { "id": "carol", "image": "https://img.icons8.com/clouds/256/000000/futurama-mom.png", "label": "Carol Miller", "description": "One of the richest people on Earth", "content": "Carol Miller (born January 30, 2880), better known as Mom, is the evil chief executive officer " "and shareholder of 99.7% of Momcorp, one of the largest industrial conglomerates in the universe " "and the source of most of Earth's robots. She is also one of the main antagonists of the Futurama " "series.", }, { "id": "homer", "image": "https://img.icons8.com/clouds/256/000000/homer-simpson.png", "label": "Homer Simpson", "description": "Overweight, lazy, and often ignorant", "content": "Homer Jay Simpson (born May 12) is the main protagonist and one of the five main characters of " "The Simpsons series(or show). He is the spouse of Marge Simpson and father of Bart, " "Lisa and Maggie Simpson.", }, ] def create_accordion_label(label, image, description): return dmc.AccordionControl( dmc.Group( [ dmc.Avatar(src=image, radius="xl", size="lg"), html.Div( [ dmc.Text(label), dmc.Text(description, size="sm", fw=400, c="dimmed"), ] ), ] ) ) def create_accordion_content(content): return dmc.AccordionPanel(dmc.Text(content, size="sm")) component = dmc.Accordion( chevronPosition="right", variant="contained", children=[ dmc.AccordionItem( [ create_accordion_label( character["label"], character["image"], character["description"] ), create_accordion_content(character["content"]), ], value=character["id"], ) for character in characters_list ], ) ``` ### Customizing chevron You can use [dash-iconify](/dash-iconify) to change the chevron icon. ```python import dash_mantine_components as dmc from dash_iconify import DashIconify dmc.Accordion( chevron=DashIconify(icon="ant-design:plus-outlined"), disableChevronRotation=True, children=[...] ) ``` ### With icons ```python import dash_mantine_components as dmc from dash_iconify import DashIconify component = dmc.Accordion( disableChevronRotation=True, children=[ dmc.AccordionItem( [ dmc.AccordionControl( "Personal Information", icon=DashIconify( icon="tabler:user", color="var(--mantine-color-blue-6)", width=20, ), ), dmc.AccordionPanel("some content"), ], value="info", ), dmc.AccordionItem( [ dmc.AccordionControl( "Shipping Address", icon=DashIconify( icon="tabler:map-pin", color= "var(--mantine-color-red-6)", width=20, ), ), dmc.AccordionPanel("some content"), ], value="addr", ), dmc.AccordionItem( [ dmc.AccordionControl( "Confirmation", icon=DashIconify( icon="tabler:circle-check", color= "var(--mantine-color-green-6)", width=20, ), ), dmc.AccordionPanel("some content"), ], value="focus", ), ], ) ``` ### Change transition ```python import dash_mantine_components as dmc dmc.Accordion( children=[...], transitionDuration=1000 ) ``` ### Default opened items Provide a default value using the `value` prop. ```python import dash_mantine_components as dmc dmc.Accordion( children=[...], value="flexibility" ) ``` If `multiple` is `True`, then value will be a list: ```python import dash_mantine_components as dmc dmc.Accordion( children=[...], value=["flexibility", ] ) ``` ```python import dash_mantine_components as dmc component = dmc.Accordion( value=["flexibility"], multiple=True, children=[ dmc.AccordionItem( [ dmc.AccordionControl("Customization"), dmc.AccordionPanel( "Colors, fonts, shadows and many other parts are customizable to fit your design needs" ), ], value="customization", ), dmc.AccordionItem( [ dmc.AccordionControl("Flexibility"), dmc.AccordionPanel( "Configure temp appearance and behavior with vast amount of settings or overwrite any part of " "component styles " ), ], value="flexibility", ), ], ) ``` ### Callbacks and State Management ```python import dash_mantine_components as dmc from dash import Output, Input, html, callback component = html.Div( children=[ dmc.Accordion( id="accordion-simple", value="customization", children=[ dmc.AccordionItem( [ dmc.AccordionControl("Customization"), dmc.AccordionPanel( "Colors, fonts, shadows and many other parts are customizable to fit your design needs" ), ], value="customization", ), dmc.AccordionItem( [ dmc.AccordionControl("Flexibility"), dmc.AccordionPanel( "Configure temp appearance and behavior with vast amount of settings or overwrite any " "part of component styles " ), ], value="flexibility", ), ], ), dmc.Text(id="accordion-state", mt=10), ] ) @callback(Output("accordion-state", "children"), Input("accordion-simple", "value")) def show_state(value): return value ``` ### Compose control You can add any additional elements that will be displayed next to `AccordionControl`, for example, you can add `ActionIcon` or `Menu`. This enables interaction with the element without affecting the opening or closing of the accordion item. In this example, try clicking the heart icon. ```python import dash_mantine_components as dmc from dash import Output, Input, html, callback, MATCH from dash_iconify import DashIconify def make_control(text, action_id): return dmc.Flex( [ dmc.AccordionControl(text), dmc.ActionIcon( children=DashIconify(icon="tabler:heart"), color="yellow", variant="default", n_clicks=0, id={"index": action_id}, ), ], justify="space-between", ) component = dmc.Accordion( id="accordion-compose-controls", chevronPosition="left", children=[ dmc.AccordionItem( [ make_control(f"Item {i}", f"action-{i}"), dmc.AccordionPanel(f"Content for AccordionItem {i}"), ], value=f"item-{i}", ) for i in range(5) ], ) @callback(Output({"index": MATCH}, "variant"), Input({"index": MATCH}, "n_clicks")) def update_heart(n): if n % 2 == 0: return "default" return "filled" ``` ### Disabled Item Set `disabled=True` in dmc.AccordionControl to disable it. ```python import dash_mantine_components as dmc dmc.AccordionControl(children=[...], disabled=True) ``` ### Styles API This component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information. #### Accordion selectors | Selector | Static selector | Description | |------------|---------------------------------|------------------------------------------------| | root | .mantine-Accordion-root | Root element | | item | .mantine-Accordion-item | Accordion.Item root element | | control | .mantine-Accordion-control | Accordion.Control root element | | chevron | .mantine-Accordion-chevron | Accordion.Control chevron container element | | label | .mantine-Accordion-label | Accordion.Control label | | icon | .mantine-Accordion-icon | Accordion.Control icon | | itemTitle | .mantine-Accordion-itemTitle | Accordion.Control title (h2-h6) tag | | panel | .mantine-Accordion-panel | Accordion.Panel root element | | content | .mantine-Accordion-content | Wrapper element of Accordion.Panel children | #### Accordion CSS variables | Selector | Variable | Description | |----------|----------------------------------|----------------------------------------------------------------| | root | --accordion-chevron-size | Controls chevron container element width and min-width | | | --accordion-radius | Controls border-radius in various elements, depending on variant | | | --accordion-transition-duration | Controls all animations' transition-duration | #### Accordion data attributes | Selector | Attribute | Condition | Value | |---------------|-------------------------|-------------------------|-----------------------------------------| | item, control | data-active | Item is active (opened) | – | | control | data-chevron-position | – | Value of `chevronPosition` prop on Accordion | ### Keyword Arguments #### Accordion - children (a list of or a singular dash component, string or number; required): Accordion content. - id (string; optional): Unique ID to identify this component in Dash callbacks. - aria-* (string; optional): Wild card aria attributes. - attributes (boolean | number | string | dict | list; optional): Passes attributes to inner elements of a component. See Styles API docs. - chevron (a list of or a singular dash component, string or number; optional): Custom chevron icon that will be used in all items. - chevronIconSize (string | number; optional): Size of the default chevron icon. Ignored when `chevron` prop is set. default `16`. - chevronPosition (a value equal to: 'left', 'right'; optional): Position of the chevron relative to the item label, `right` by default. - chevronSize (string | number; optional): Size of the chevron icon container, `24` by default. - className (string; optional): Class added to the root element, if applicable. - classNames (dict; optional): Adds custom CSS class names to inner elements of a component. See Styles API docs. - darkHidden (boolean; optional): Determines whether component should be hidden in dark color scheme with `display: none`. - data-* (string; optional): Wild card data attributes. - disableChevronRotation (boolean; optional): Determines whether chevron rotation should be disabled, `False` by default. - hiddenFrom (string; optional): Breakpoint above which the component is hidden with `display: none`. - lightHidden (boolean; optional): Determines whether component should be hidden in light color scheme with `display: none`. - loading_state (dict; optional): Object that holds the loading state object coming from dash-renderer. For use with dash<3. `loading_state` is a dict with keys: - loop (boolean; optional): Determines whether arrow key presses should loop though items (first to last and last to first), `True` by default. - mod (string | dict | list of string | dicts; optional): Element modifiers transformed into `data-` attributes. For example: "xl" or {"data-size": "xl"}. Can also be a list of strings or dicts for multiple modifiers. Falsy values are removed. - multiple (boolean; optional): Determines whether multiple items can be opened at a time, `False` by default. - order (a value equal to: 2, 3, 4, 5, 6; optional): Heading order, has no effect on visuals. - persisted_props (list of strings; optional): Properties whose user interactions will persist after refreshing the component or the page. Since only `value` is allowed this prop can normally be ignored. - persistence (string | number | boolean; optional): Used to allow user interactions in this component to be persisted when the component - or the page - is refreshed. If `persisted` is truthy and hasn't changed from its previous value, a `value` that the user has changed while using the app will keep that change, as long as the new `value` also matches what was given originally. Used in conjunction with `persistence_type`. Note: The component must have an `id` for persistence to work. - persistence_type (a value equal to: 'local', 'session', 'memory'; optional): Where persisted user changes will be stored: memory: only kept in memory, reset on page refresh. local: window.localStorage, data is kept after the browser quit. session: window.sessionStorage, data is cleared once the browser quit. - radius (number; optional): Key of `theme.radius` or any valid CSS value to set border-radius. Numbers are converted to rem. `theme.defaultRadius` by default. - styles (boolean | number | string | dict | list; optional): Adds inline styles directly to inner elements of a component. See Styles API docs. - tabIndex (number; optional): tab-index. - transitionDuration (number; optional): Transition duration in ms, `200` by default. - value (string | list of strings; optional): Value for controlled component. - variant (a value equal to: 'default', 'contained', 'filled', 'separated'; optional): Controls visuals. - visibleFrom (string; optional): Breakpoint below which the component is hidden with `display: none`. #### AccordionControl - children (a list of or a singular dash component, string or number; optional): Control label. - id (string; optional): Unique ID to identify this component in Dash callbacks. - aria-* (string; optional): Wild card aria attributes. - attributes (boolean | number | string | dict | list; optional): Passes attributes to inner elements of a component. See Styles API docs. - chevron (a list of or a singular dash component, string or number; optional): Custom chevron icon. - className (string; optional): Class added to the root element, if applicable. - classNames (dict; optional): Adds custom CSS class names to inner elements of a component. See Styles API docs. - darkHidden (boolean; optional): Determines whether component should be hidden in dark color scheme with `display: none`. - data-* (string; optional): Wild card data attributes. - disabled (boolean; optional): Disables control button. - hiddenFrom (string; optional): Breakpoint above which the component is hidden with `display: none`. - icon (a list of or a singular dash component, string or number; optional): Icon displayed next to the label. - lightHidden (boolean; optional): Determines whether component should be hidden in light color scheme with `display: none`. - loading_state (dict; optional): Object that holds the loading state object coming from dash-renderer. For use with dash<3. `loading_state` is a dict with keys: - mod (string | dict | list of string | dicts; optional): Element modifiers transformed into `data-` attributes. For example: "xl" or {"data-size": "xl"}. Can also be a list of strings or dicts for multiple modifiers. Falsy values are removed. - styles (boolean | number | string | dict | list; optional): Adds inline styles directly to inner elements of a component. See Styles API docs. - tabIndex (number; optional): tab-index. - variant (string; optional): variant. - visibleFrom (string; optional): Breakpoint below which the component is hidden with `display: none`. #### AccordionItem - children (a list of or a singular dash component, string or number; optional): Content. - id (string; optional): Unique ID to identify this component in Dash callbacks. - aria-* (string; optional): Wild card aria attributes. - attributes (boolean | number | string | dict | list; optional): Passes attributes to inner elements of a component. See Styles API docs. - className (string; optional): Class added to the root element, if applicable. - classNames (dict; optional): Adds custom CSS class names to inner elements of a component. See Styles API docs. - darkHidden (boolean; optional): Determines whether component should be hidden in dark color scheme with `display: none`. - data-* (string; optional): Wild card data attributes. - hiddenFrom (string; optional): Breakpoint above which the component is hidden with `display: none`. - lightHidden (boolean; optional): Determines whether component should be hidden in light color scheme with `display: none`. - loading_state (dict; optional): Object that holds the loading state object coming from dash-renderer. For use with dash<3. `loading_state` is a dict with keys: - mod (string | dict | list of string | dicts; optional): Element modifiers transformed into `data-` attributes. For example: "xl" or {"data-size": "xl"}. Can also be a list of strings or dicts for multiple modifiers. Falsy values are removed. - styles (boolean | number | string | dict | list; optional): Adds inline styles directly to inner elements of a component. See Styles API docs. - tabIndex (number; optional): tab-index. - value (string; required): Value that is used to manage accordion state. - variant (string; optional): variant. - visibleFrom (string; optional): Breakpoint below which the component is hidden with `display: none`. #### AccordionPanel - children (a list of or a singular dash component, string or number; optional): Content. - id (string; optional): Unique ID to identify this component in Dash callbacks. - aria-* (string; optional): Wild card aria attributes. - attributes (boolean | number | string | dict | list; optional): Passes attributes to inner elements of a component. See Styles API docs. - className (string; optional): Class added to the root element, if applicable. - classNames (dict; optional): Adds custom CSS class names to inner elements of a component. See Styles API docs. - darkHidden (boolean; optional): Determines whether component should be hidden in dark color scheme with `display: none`. - data-* (string; optional): Wild card data attributes. - hiddenFrom (string; optional): Breakpoint above which the component is hidden with `display: none`. - lightHidden (boolean; optional): Determines whether component should be hidden in light color scheme with `display: none`. - loading_state (dict; optional): Object that holds the loading state object coming from dash-renderer. For use with dash<3. `loading_state` is a dict with keys: - mod (string | dict | list of string | dicts; optional): Element modifiers transformed into `data-` attributes. For example: "xl" or {"data-size": "xl"}. Can also be a list of strings or dicts for multiple modifiers. Falsy values are removed. - styles (boolean | number | string | dict | list; optional): Adds inline styles directly to inner elements of a component. See Styles API docs. - tabIndex (number; optional): tab-index. - variant (string; optional): variant. - visibleFrom (string; optional): Breakpoint below which the component is hidden with `display: none`.