Collapse

Twitter bootstrap Documentation

Example

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->collapse(
    [
        'triggers' => [
            [
                'options' => [
                    'variant' => 'primary',
                    'label' => 'Link with href',
                    'tag' => 'a',
                ],
            ],
            [
                'options' => [
                    'variant' => 'primary',
                    'label' => 'Button with data-bs-target',
                ],
            ],
        ],
        'targets' => [
            [
                'content' => $this->card(
                    'Some placeholder content for the collapse component. ' .
                'This panel is hidden by default but revealed ' .
                'when the user activates the relevant trigger.'
                ),
                'attributes' => [
                    'id' => 'collapseExample',
                ],
            ],
        ],
    ],
);

Horizontal

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->collapse(
    [
        'horizontal' => [
            'style' => 'min-height: 120px;',
        ],
        'triggers' => [
            [
                'options' => [
                    'variant' => 'primary',
                    'label' => 'Toggle width collapse',
                ],
            ],
        ],
        'targets' => [
            [
                'content' => $this->card(
                    'Some placeholder content for the collapse component. ' .
                'This panel is hidden by default but revealed ' .
                'when the user activates the relevant trigger.',
                    ['style' => 'width: 300px;'],
                ),
                'attributes' => [
                    'id' => 'collapseWidthExample',
                ],
            ],
        ],
    ],
);

Multiple targets

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->collapse(
    [
        'triggers' => [
            [
                'options' => [
                    'variant' => 'primary',
                    'label' => 'Toggle first element',
                    'tag' => 'a',
                ],
            ],
            [
                'options' => [
                    'variant' => 'primary',
                    'label' => 'Toggle second element',
                ],
            ],
            [
                'options' => [
                    'variant' => 'primary',
                    'label' => 'Toggle both elements',
                ],
                'attributes' => [
                    'data-bs-target' => '.multi-collapse',
                    'aria-controls' => 'multiCollapseExample1 multiCollapseExample2',
                ],
            ],
        ],
        'targets' => [
            [
                'column' => true,
                'content' => $this->card(
                    'Some placeholder content for the first collapse component of this ' .
                'multi-collapse example. This panel is hidden by default but revealed ' .
                'when the user activates the relevant trigger.',
                ),
                'attributes' => [
                    'id' => 'multiCollapseExample1',
                    'class' => 'multi-collapse',
                ],
            ],
            [
                'column' => true,
                'content' => $this->card(
                    'Some placeholder content for the first collapse component of this ' .
                'multi-collapse example. This panel is hidden by default but revealed ' .
                'when the user activates the relevant trigger.',
                ),
                'attributes' => [
                    'id' => 'multiCollapseExample2',
                    'class' => 'multi-collapse',
                ],
            ],
        ],
    ],
);