Class yii\bootstrap4\Accordion

Inheritanceyii\bootstrap4\Accordion » yii\bootstrap4\Widget » yii\base\Widget
Uses Traitsyii\bootstrap4\BootstrapWidgetTrait
Source Code https://github.com/yiisoft/yii2-bootstrap4/blob/master/src/Accordion.php

Accordion renders an accordion bootstrap javascript component.

For example:

echo Accordion::widget([
    'items' => [
        // equivalent to the above
        [
            'label' => 'Collapsible Group Item #1',
            'content' => 'Anim pariatur cliche...',
            // open its content by default
            'contentOptions' => ['class' => 'in']
        ],
        // another group item
        [
            'label' => 'Collapsible Group Item #1',
            'content' => 'Anim pariatur cliche...',
            'contentOptions' => [...],
            'options' => [...],
            'expand' => true,
        ],
        // if you want to swap out .card-block with .list-group, you may use the following
        [
            'label' => 'Collapsible Group Item #1',
            'content' => [
                'Anim pariatur cliche...',
                'Anim pariatur cliche...'
            ],
            'contentOptions' => [...],
            'options' => [...],
            'footer' => 'Footer' // the footer label in list-group
        ],
    ]
]);

See also https://getbootstrap.com/docs/4.5/components/collapse/#accordion-example.

Public Properties

Hide inherited properties

Property Type Description Defined By
$autoCloseItems boolean Whether to close other items if an item is opened. yii\bootstrap4\Accordion
$clientEvents array The event handlers for the underlying Bootstrap JS plugin. yii\bootstrap4\BootstrapWidgetTrait
$clientOptions array The options for the underlying Bootstrap JS plugin. yii\bootstrap4\BootstrapWidgetTrait
$encodeLabels boolean Whether the labels for header items should be HTML-encoded. yii\bootstrap4\Accordion
$itemToggleOptions array The HTML options for the item toggle tag. yii\bootstrap4\Accordion
$items array List of groups in the collapse widget. yii\bootstrap4\Accordion
$options array The HTML attributes for the widget container tag. yii\bootstrap4\Widget

Public Methods

Hide inherited methods

Method Description Defined By
getView() yii\bootstrap4\BootstrapWidgetTrait
init() Initializes the widget. yii\bootstrap4\BootstrapWidgetTrait
renderItem() Renders a single collapsible item group yii\bootstrap4\Accordion
renderItems() Renders collapsible items as specified on $items. yii\bootstrap4\Accordion
run() yii\bootstrap4\Accordion

Protected Methods

Hide inherited methods

Method Description Defined By
registerClientEvents() Registers JS event handlers that are listed in $clientEvents. yii\bootstrap4\BootstrapWidgetTrait
registerPlugin() Registers a specific Bootstrap plugin and the related events yii\bootstrap4\BootstrapWidgetTrait

Property Details

Hide inherited properties

$autoCloseItems public property

Whether to close other items if an item is opened. Defaults to true which causes an accordion effect. Set this to false to allow keeping multiple items open at once.

public boolean $autoCloseItems true
$encodeLabels public property

Whether the labels for header items should be HTML-encoded.

public boolean $encodeLabels true
$itemToggleOptions public property

The HTML options for the item toggle tag. Key 'tag' might be used here for the tag name specification. For example:

[
    'tag' => 'div',
    'class' => 'custom-toggle',
]
$items public property

List of groups in the collapse widget. Each array element represents a single group with the following structure:

  • label: string, required, the group header label.
  • encode: bool, optional, whether this label should be HTML-encoded. This param will override global $this->encodeLabels param.
  • content: array|string|object, required, the content (HTML) of the group
  • options: array, optional, the HTML attributes of the group
  • contentOptions: optional, the HTML attributes of the group's content

Since version 2.0.7 you may also specify this property as key-value pairs, where the key refers to the label and the value refers to content. If value is a string it is interpreted as label. If it is an array, it is interpreted as explained above.

For example:

echo Accordion::widget([
    'items' => [
      'Introduction' => 'This is the first collapsable menu',
      'Second panel' => [
          'content' => 'This is the second collapsable menu',
      ],
      [
          'label' => 'Third panel',
          'content' => 'This is the third collapsable menu',
      ],
  ]
])
public array $items = []

Method Details

Hide inherited methods

getView() public abstract method

Defined in: yii\bootstrap4\BootstrapWidgetTrait::getView()

See also \yii\base\Widget::getView().

public abstract \yii\web\View getView ( )
return \yii\web\View

The view object that can be used to render views or view files.

                abstract function getView();

            
init() public method

Defined in: yii\bootstrap4\BootstrapWidgetTrait::init()

Initializes the widget.

This method will register the bootstrap asset bundle. If you override this method, make sure you call the parent implementation first.

public void init ( )

                public function init()
{
    parent::init();
    if (!isset($this->options['id'])) {
        $this->options['id'] = $this->getId();
    }
}

            
registerClientEvents() protected method

Defined in: yii\bootstrap4\BootstrapWidgetTrait::registerClientEvents()

Registers JS event handlers that are listed in $clientEvents.

protected void registerClientEvents ( )

                protected function registerClientEvents()
{
    if (!empty($this->clientEvents)) {
        $id = $this->options['id'];
        $js = [];
        foreach ($this->clientEvents as $event => $handler) {
            $js[] = "jQuery('#$id').on('$event', $handler);";
        }
        $this->getView()->registerJs(implode("\n", $js));
    }
}

            
registerPlugin() protected method

Defined in: yii\bootstrap4\BootstrapWidgetTrait::registerPlugin()

Registers a specific Bootstrap plugin and the related events

protected void registerPlugin ( $name )
$name string

The name of the Bootstrap plugin

                protected function registerPlugin($name)
{
    $view = $this->getView();
    BootstrapPluginAsset::register($view);
    $id = $this->options['id'];
    if ($this->clientOptions !== false) {
        $options = empty($this->clientOptions) ? '' : Json::htmlEncode($this->clientOptions);
        $js = "jQuery('#$id').$name($options);";
        $view->registerJs($js);
    }
    $this->registerClientEvents();
}

            
renderItem() public method

Renders a single collapsible item group

public string renderItem ( $header, $item, $index )
$header string

A label of the item group $items

$item array

A single item from $items

$index integer

The item index as each item group content must have an id

return string

The rendering result

throws \yii\base\InvalidConfigException
throws Exception

                public function renderItem($header, $item, $index)
{
    if (array_key_exists('content', $item)) {
        $id = $this->options['id'] . '-collapse' . $index;
        $expand = ArrayHelper::remove($item, 'expand', false);
        $options = ArrayHelper::getValue($item, 'contentOptions', []);
        $options['id'] = $id;
        Html::addCssClass($options, ['widget' => 'collapse']);
        // check if accordion expanded, if true add show class
        if ($expand) {
            Html::addCssClass($options, ['visibility' => 'show']);
        }
        if (!isset($options['aria-label'], $options['aria-labelledby'])) {
            $options['aria-labelledby'] = $options['id'] . '-heading';
        }
        $encodeLabel = isset($item['encode']) ? $item['encode'] : $this->encodeLabels;
        if ($encodeLabel) {
            $header = Html::encode($header);
        }
        $itemToggleOptions = array_merge([
            'tag' => 'button',
            'type' => 'button',
            'data-toggle' => 'collapse',
            'data-target' => '#' . $options['id'],
            'aria-expanded' => $expand ? 'true' : 'false',
            'aria-controls' => $options['id']
        ], $this->itemToggleOptions);
        $itemToggleTag = ArrayHelper::remove($itemToggleOptions, 'tag', 'button');
        if ($itemToggleTag === 'a') {
            ArrayHelper::remove($itemToggleOptions, 'data-target');
            $headerToggle = Html::a($header, '#' . $id, $itemToggleOptions) . "\n";
        } else {
            Html::addCssClass($itemToggleOptions, ['feature' => 'btn-link']);
            $headerToggle = Button::widget([
                    'label' => $header,
                    'encodeLabel' => false,
                    'options' => $itemToggleOptions
                ]) . "\n";
        }
        $header = Html::tag('h5', $headerToggle, ['class' => 'mb-0']);
        if (is_string($item['content']) || is_numeric($item['content']) || is_object($item['content'])) {
            $content = Html::tag('div', $item['content'], ['class' => 'card-body']) . "\n";
        } elseif (is_array($item['content'])) {
            $content = Html::ul($item['content'], [
                    'class' => 'list-group',
                    'itemOptions' => [
                        'class' => 'list-group-item'
                    ],
                    'encode' => false,
                ]) . "\n";
        } else {
            throw new InvalidConfigException('The "content" option should be a string, array or object.');
        }
    } else {
        throw new InvalidConfigException('The "content" option is required.');
    }
    $group = [];
    if ($this->autoCloseItems) {
        $options['data-parent'] = '#' . $this->options['id'];
    }
    $group[] = Html::tag('div', $header, ['class' => 'card-header', 'id' => $options['id'] . '-heading']);
    $group[] = Html::beginTag('div', $options);
    $group[] = $content;
    if (isset($item['footer'])) {
        $group[] = Html::tag('div', $item['footer'], ['class' => 'card-footer']);
    }
    $group[] = Html::endTag('div');
    return implode("\n", $group);
}

            
renderItems() public method

Renders collapsible items as specified on $items.

public string renderItems ( )
return string

The rendering result

throws \yii\base\InvalidConfigException

if label isn't specified

                public function renderItems()
{
    $items = [];
    $index = 0;
    $expanded = array_search(true, ArrayHelper::getColumn(ArrayHelper::toArray($this->items), 'expand', true));
    foreach ($this->items as $key => $item) {
        if (!is_array($item)) {
            $item = ['content' => $item];
        }
        // BC compatibility: expand first item if none is expanded
        if ($expanded === false && $index === 0) {
            $item['expand'] = true;
        }
        if (!array_key_exists('label', $item)) {
            if (is_int($key)) {
                throw new InvalidConfigException("The 'label' option is required.");
            } else {
                $item['label'] = $key;
            }
        }
        $header = ArrayHelper::remove($item, 'label');
        $options = ArrayHelper::getValue($item, 'options', []);
        Html::addCssClass($options, ['panel' => 'card']);
        $items[] = Html::tag('div', $this->renderItem($header, $item, $index++), $options);
    }
    return implode("\n", $items);
}

            
run() public method

public void run ( )
throws \yii\base\InvalidConfigException

                public function run()
{
    $this->registerPlugin('collapse');
    Html::addCssClass($this->options, ['widget' => 'accordion']);
    return implode("\n", [
            Html::beginTag('div', $this->options),
            $this->renderItems(),
            Html::endTag('div')
        ]) . "\n";
}