Skip to content

Accordian

Definition

An accordion is a vertically stacked list of items that can be expanded or collapsed to reveal more content. Each item has a header that is always visible and a body that appears when the header is clicked.

Accordions help organize content, reduce scrolling, and present information in a manageable way. They can include icons, animations, and can be configured to allow multiple or single item expansion.

  • Reduces vertical scrolling for easier navigation.
  • Organizes content into sections for better readability.
  • Allows users to focus on one section at a time.

Example

{% extends 'django_spire/accordion/accordion.html' %}

{% block accordion_toggle %}
    {% include 'component/accordion/item/example_recipe_item.html' %}
{% endblock %}

{% block accordion_content %}
    {% include 'component/accordion/example_recipe_step_accordion.html' %}
{% endblock %}