Fix #196: Added ability for Accordion to expand a certain card

yiisoft · Jul 17, 2020 · 21b7ba1 · 21b7ba1
1 parent 2d6c4f6
commit 21b7ba1
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,7 @@ Yii Framework 2 bootstrap4 extension Change Log
 -----------------------
 
 - Enh #191: Added `centerVertical`, `scrollable`, `dialogOptions` options to Modal and `role="document"` to `modal-dialog` element (adhayward)
+- Enh #196: Added ability for `Accordion` to expand a certain card (hoaaah, Thoulah, simialbi)
 - Enh #197: Added support to override every class (simialbi)
 
 2.0.8 October 08, 2019

diff --git a/src/Accordion.php b/src/Accordion.php
@@ -31,6 +31,7 @@
  *             'content' => 'Anim pariatur cliche...',
  *             'contentOptions' => [...],
  *             'options' => [...],
+ *             'expand' => true,
  *         ],
  *         // if you want to swap out .card-block with .list-group, you may use the following
  *         [
@@ -109,7 +110,6 @@ class Accordion extends Widget
      */
     public $itemToggleOptions = [];
 
-
     /**
      * {@inheritdoc}
      * @throws InvalidConfigException
@@ -134,10 +134,15 @@ 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.");
@@ -167,12 +172,16 @@ 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']);
-            if ($index === 0) {
+
+            // 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';
             }
@@ -187,7 +196,7 @@ public function renderItem($header, $item, $index)
                 'type' => 'button',
                 'data-toggle' => 'collapse',
                 'data-target' => '#' . $options['id'],
-                'aria-expanded' => ($index === 0) ? 'true' : 'false',
+                'aria-expanded' => $expand ? 'true' : 'false',
                 'aria-controls' => $options['id']
             ], $this->itemToggleOptions);
 

diff --git a/tests/AccordionTest.php b/tests/AccordionTest.php
@@ -165,6 +165,39 @@ public function testLabelKeys()
 </div></div>
 </div>
 
+HTML
+        , $output);
+    }
+
+    public function testExpandOptions()
+    {
+        Accordion::$counter = 0;
+        $output = Accordion::widget([
+            'items' => [
+                'Item1' => 'Content1',
+                'Item2' => [
+                    'content' => 'Content2',
+                    'expand' => true,
+                ],
+            ]
+        ]);
+
+        $this->assertEqualsWithoutLE(<<<HTML
+<div id="w0" class="accordion">
+<div class="card"><div id="w0-collapse0-heading" class="card-header"><h5 class="mb-0"><button type="button" id="w1" class="btn-link btn" data-toggle="collapse" data-target="#w0-collapse0" aria-expanded="false" aria-controls="w0-collapse0">Item1</button>
+</h5></div>
+<div id="w0-collapse0" class="collapse" aria-labelledby="w0-collapse0-heading" data-parent="#w0">
+<div class="card-body">Content1</div>
+
+</div></div>
+<div class="card"><div id="w0-collapse1-heading" class="card-header"><h5 class="mb-0"><button type="button" id="w2" class="btn-link btn" data-toggle="collapse" data-target="#w0-collapse1" aria-expanded="true" aria-controls="w0-collapse1">Item2</button>
+</h5></div>
+<div id="w0-collapse1" class="collapse show" aria-labelledby="w0-collapse1-heading" data-parent="#w0">
+<div class="card-body">Content2</div>
+
+</div></div>
+</div>
+
 HTML
         , $output);
     }