Collapse Component
A Bootstrap 5 component for creating expandable/collapsible content sections with customizable triggers.
Parameters:
Core Options:
- id: string - Unique identifier for the collapse (required)
- content: string - Content to be collapsed/expanded (required)
- show: boolean - Whether the content is expanded by default (default: false)
- horizontal: boolean - Enable horizontal collapse animation (default: false)
- class: string - Additional classes for the collapse container
Trigger Options:
- trigger: array - Configuration for the collapse trigger (required)
- text: string - Text for the trigger button/link (required)
- tag: string - HTML element to use ('button' or 'a', default: 'button')
- variant: string - Button color variant (default: 'primary')
Values: 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark'
- icon: string - Icon class to display before text (e.g., 'bi bi-chevron-down')
- class: string - Additional classes for the trigger element
Example Usage:
{{ component('content/collapse', {
id: 'readMore',
trigger: {
text: 'Read More',
variant: 'primary',
icon: 'bi bi-chevron-down'
},
content: '<p>This is the collapsible content that can be toggled.</p>',
show: false
}) }}
Link Example:
{{ component('content/collapse', {
id: 'details',
trigger: {
text: 'View Details',
tag: 'a',
class: 'text-decoration-none'
},
content: '<div class="p-3 border">Detailed content here</div>',
horizontal: true
}) }}
All available options for the Collapse component
ThemedComponent::make("content/collapse")
->content('value') //string - Content to be collapsed/expanded (required) (always set this first)
->addAttribute('value') //Add an attribute to the element. This is a string like 'data-foo="bar"' or multiple attributes in a single string like 'data-foo="bar" data-bar="baz"' (optional)
->addCss('value') //string - Add css styles to the element. This should be '<style> custom-class {...} </style>' (optional)
->addJavaScript('value') //string - Add a script to the element. This is a string like '<script>console.log('Hello World!')</script>' (optional)
->canSee('value') //bool - Whether the component should be visible or not (optional)
->class('value') //string - Additional classes for the trigger element
->horizontal('value') //boolean - Enable horizontal collapse animation (default: false)
->icon('value') //string - Icon class to display before text (e.g., 'bi bi-chevron-down')
->id('value') //string - The id of the element. If no id is supplied, a random one will be generated (optional)
->show('value') //boolean - Whether the content is expanded by default (default: false)
->tag('value') //string - HTML element to use ('button' or 'a', default: 'button')
->text('value') //string - Text for the trigger button/link (required)
->trigger('value') //array - Configuration for the collapse trigger (required)
->variant('value') //string - Button color variant (default: 'primary')
->render();
Simple collapse with button trigger
// Basic collapse with button trigger
echo ThemedComponent::make('content/collapse')
->id('basic-collapse')
->trigger([
'text' => 'Toggle Content',
'variant' => 'primary'
])
->content('<div class="p-3 border">This is the collapsible content that can be toggled.</div>')
->render();Collapse with icon, custom styling, and default expanded state
// Advanced collapse with icon and custom styling
echo ThemedComponent::make('content/collapse')
->id('advanced-collapse')
->trigger([
'text' => 'Show Details',
'variant' => 'info',
'icon' => 'bi bi-chevron-down',
'class' => 'mb-3'
])
->show(true)
->content('
<div class="card">
<div class="card-body">
<h5 class="card-title">Expanded by Default</h5>
<p class="card-text">This collapse is shown by default and includes an icon in the trigger.</p>
</div>
</div>
')
->render();This collapse is shown by default and includes an icon in the trigger.
Different collapse styles including horizontal collapse and multiple triggers
// Link trigger with horizontal collapse
echo ThemedComponent::make('content/collapse')
->id('horizontal-collapse')
->trigger([
'tag' => 'a',
'text' => 'Toggle Horizontal',
'class' => 'text-decoration-none text-primary'
])
->horizontal(true)
->content('
<div class="card card-body" style="width: 300px;">
<p class="mb-0">This content collapses horizontally instead of vertically.</p>
</div>
')
->render();
// Multiple triggers for the same collapse
echo ThemedComponent::make('content/collapse')
->id('multi-trigger')
->trigger([
'text' => 'Primary Button',
'variant' => 'primary',
'class' => 'me-2'
])
->content('
<div class="alert alert-info mt-3">
This content can be toggled by multiple triggers!
</div>
')
->render();
echo ThemedComponent::make('content/collapse')
->id('multi-trigger')
->trigger([
'tag' => 'a',
'text' => 'or click this link',
'class' => 'text-decoration-none'
])
->render();This content collapses horizontally instead of vertically.
The Twig template file for the Collapse component
{# Collapse Component
A Bootstrap 5 component for creating expandable/collapsible content sections with customizable triggers.
Parameters:
Core Options:
- id: string - Unique identifier for the collapse (required)
- content: string - Content to be collapsed/expanded (required)
- show: boolean - Whether the content is expanded by default (default: false)
- horizontal: boolean - Enable horizontal collapse animation (default: false)
- class: string - Additional classes for the collapse container
Trigger Options:
- trigger: array - Configuration for the collapse trigger (required)
- text: string - Text for the trigger button/link (required)
- tag: string - HTML element to use ('button' or 'a', default: 'button')
- variant: string - Button color variant (default: 'primary')
Values: 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark'
- icon: string - Icon class to display before text (e.g., 'bi bi-chevron-down')
- class: string - Additional classes for the trigger element
Example Usage:
{{ component('content/collapse', {
id: 'readMore',
trigger: {
text: 'Read More',
variant: 'primary',
icon: 'bi bi-chevron-down'
},
content: '<p>This is the collapsible content that can be toggled.</p>',
show: false
}) }}
Link Example:
{{ component('content/collapse', {
id: 'details',
trigger: {
text: 'View Details',
tag: 'a',
class: 'text-decoration-none'
},
content: '<div class="p-3 border">Detailed content here</div>',
horizontal: true
}) }}
#}
{%- set trigger_tag = content.trigger.tag|default('button') -%}
{%- set trigger_class = content.trigger.class|default('') -%}
{%- set trigger_variant = content.trigger.variant|default('primary') -%}
{%- if trigger_tag == 'button' -%}
<button class="btn btn-{{ trigger_variant }} {{ trigger_class }}"
type="button"
data-bs-toggle="collapse"
data-bs-target="#{{ content.id }}"
aria-expanded="{% if content.show %}true{% else %}false{% endif %}"
aria-controls="{{ content.id }}">
{%- if content.trigger.icon -%}
<i class="{{ content.trigger.icon }} me-2" aria-hidden="true"></i>
{%- endif -%}
{{ content.trigger.text }}
</button>
{%- else -%}
<a href="#{{ content.id }}"
class="{{ trigger_class }}"
data-bs-toggle="collapse"
role="button"
aria-expanded="{% if content.show %}true{% else %}false{% endif %}"
aria-controls="{{ content.id }}">
{%- if content.trigger.icon -%}
<i class="{{ content.trigger.icon }} me-2" aria-hidden="true"></i>
{%- endif -%}
{{ content.trigger.text }}
</a>
{%- endif -%}
<div class="collapse{% if content.show %} show{% endif %}{% if content.horizontal %} collapse-horizontal{% endif %}{% if content.class %} {{ content.class }}{% endif %}"
id="{{ content.id }}">
{{ content.content|raw }}
</div>