Collapse
Toggle the visibility of content across your project with a few classes and our JavaScript plugins.
Component Properties
title
: (string) The text displayed on the collapse trigger button. It is the label for the collapsible content.
button_html_tag
(optional): (string) Specifies the HTML tag to be used for the collapse trigger. It can be either button
or a
(anchor). Defaults to button.
id
(optional): (integer) A unique identifier for the collapse component. This is important for accessibility and JavaScript functionality.
direction
(optional): (string) The direction in which the content will collapse. Can be vertical
or horizontal
. Defaults to vertical
.
collapsed
(optional): (boolean) Indicates whether the collapsible content is initially collapsed. Defaults to true, meaning the content starts in a collapsed state.
content
: (string/block) The content that will be shown when the collapse component is expanded. This can be a simple text string, HTML, or other Drupal blocks.
Usage
Example #1: Simple text based collapse.
{% include 'radix:collapse' with {
title: 'Read More About This Topic',
button_html_tag: 'button',
id: '123',
direction: 'vertical',
content: 'This is detailed content about the topic, which can be text, images, or other Drupal blocks.'
} %}
Example #2: More common with block overrides.
{%
embed 'radix:collapse' with {
title: 'Show the card!',
button_html_tag: 'button',
id: 'collapse-card',
}
%}
{% block collapse_content %}
{%
include 'radix:card' with {
card_title_tag: 'h4',
card_title: 'The title',
card_header: 'CARD HEADER',
card_footer: 'The card footer',
card_body_tag: 'div',
card_body: 'This is the card body',
card_text_tag: 'p',
card_link_text: 'Read more...',
card_border: false,
card_utility_classes: ['col-4'],
card_image_cap: 'bottom',
}
%}
{% endblock %}
{% endembed %}
Last updated
Was this helpful?