Recommended modules:
- views_bootstrap
- paragraphs
- field_group_bootstrap
These will allow each of the following methods to render correctly
Bootstrap docs for required HTML for the component to render: https://getbootstrap.com/docs/5.3/components/accordion/
As is the case for all components, matching the HTML spec for the bootstrap component will render the component in-site along with the theme customisations we have added.
In addition, for demonstration purposes, we have included an Accordion component, this consists of an Accordion Block type with an Accordion Item paragraph type multi-value field.
block-content--accordion.html.twig (blocks placed via blocks page)
OR
block--inline-block--accordion.html.twig (blocks placed via layout builder)
Then those call these nested templates
accordion.twig
paragraph--accordion-item.html.twig
accordion-item.twig
Accordion
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at augue nec velit interdum malesuada sit amet eu eros. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla accumsan rutrum nisi, luctus auctor metus convallis a. Nam nec viverra nibh. Nam pellentesque non lectus quis fermentum. Sed nunc dui, rhoncus sit amet ultrices eget, porta et purus. Cras tempus eros nec nibh congue, non bibendum quam congue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In vitae eros mauris. Suspendisse potenti. Nulla hendrerit mauris ac diam tempor porta.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at augue nec velit interdum malesuada sit amet eu eros. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla accumsan rutrum nisi, luctus auctor metus convallis a. Nam nec viverra nibh. Nam pellentesque non lectus quis fermentum. Sed nunc dui, rhoncus sit amet ultrices eget, porta et purus. Cras tempus eros nec nibh congue, non bibendum quam congue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In vitae eros mauris. Suspendisse potenti. Nulla hendrerit mauris ac diam tempor porta.
HTML example of buttons and tooltips
<button type="button" class="btn btn-secondary btn-lg"
data-bs-toggle="tooltip" data-bs-placement="top"
data-bs-custom-class="custom-tooltip"
data-bs-title="This top tooltip is themed via CSS variables.">
Secondary button with tooltip</button> <button class="btn btn-danger btn-lg" type="button" > <i class="bi bi-bi bi-radioactive"></i> Danger button with icon </button>
Other available render modes
Views plugin
Via the Views Bootstrap Module an accordion views row formatter is made available.
Views Accordion Demo
Data is an invaluable asset that can provide valuable insights into customer behaviors and preferences, market trends, and the efficiency of internal operations. Through data analysis, businesses can better understand their customers, tailor products and services to their needs, and identify areas for improvement.
In publishing and graphic design, Lorem ipsum (/ˌlɔː.rəm ˈɪp.səm/) is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before the final copy is available. It is also used to temporarily replace text in a process called greeking, which allows designers to consider the form of a webpage or publication, without the meaning of the text influencing the design.
Lorem ipsum is typically a corrupted version of De finibus bonorum et malorum, a 1st-century BC text by the Roman statesman and philosopher Cicero, with words altered, added, and removed to make it nonsensical and improper Latin. The first two words themselves are a truncation of dolorem ipsum ("pain itself").
In publishing and graphic design, Lorem ipsum (/ˌlɔː.rəm ˈɪp.səm/) is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before the final copy is available. It is also used to temporarily replace text in a process called greeking, which allows designers to consider the form of a webpage or publication, without the meaning of the text influencing the design.
Lorem ipsum is typically a corrupted version of De finibus bonorum et malorum, a 1st-century BC text by the Roman statesman and philosopher Cicero, with words altered, added, and removed to make it nonsensical and improper Latin. The first two words themselves are a truncation of dolorem ipsum ("pain itself").
Fieldgroups
In addition to Blocks and Views we use modified templates from the Field group bootstrap module to also allow Accordions via Field groups on the manage display page for any entity type.