Collapse

Toggle the visibility of content across your project with a few classes and our JavaScript plugins.

Bootstrap docs

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',
} %}
  <div data-gb-custom-block data-tag="block">
    {% 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',
    } %}
  </div>
</div>