.. _accordion-block:

Accordion Block
===============

Creates a collapsible section with a button to toggle.
Each Accordion has multiple sections or panels.

`View example live <https://crxpharma.codered.cloud/demo-blocks/accordion-block/>`_


Example:

.. figure:: images/accordion_closed.jpeg
    :alt: demo accordion closed

    Demo accordion closed

.. figure:: images/accordion_open.jpeg
    :alt: demo accordion with panel open

    Demo accordion with panel open

Field Reference
---------------

Fields and purposes:

* **Accordion** - Choose a preexisting accordion snippet, created under snippets.

Editor:

.. figure:: images/accordion_demo.jpeg
    :alt: Editing screen for accordion

    Editing screen for accordion

Each Accordion panel needs a name and content.  After you make a second panel,
arrows will appear to allow you to change the order of the panels.

.. figure:: images/accordion_arrows.jpeg
    :alt: arrows on the accordion panels

    Arrows on the accordion panels. They appear after you make a second panel.

Additional Information in the `bootstrap docs <https://getbootstrap.com/docs/5.2/components/accordion/>`_