#Accordion

Render accordion where items can be opened and collapsed

Bootstrap docs: https://getbootstrap.com/docs/5.3/components/accordion/

#Syntax

$Bootstrap = new renderabootstrap5component();
echo $Bootstrap->accordion($aItems, [$aOptions])

Parameters: 2

array of accordeaon items
Text

title {string}
text {string}

Flags:

show {bool} item is visible

array of settings

Attributes

id {string} id of the accordion wrapper div

Flags

flush {bool}
stayopen {bool} true=item stays open when clicking another item; default: false

#Example

#PHP snippet

$Bootstrap->accordion([
  0 => [
    'title' => 'A',
    'text' => 'Content of A',
  ],
  1 => [
    'title' => 'B',
    'text' => 'Content of B',
  ],
  2 => [
    'title' => 'C',
    'text' => 'Content of C',
  ],
],
[
]);

#Generated html output

<div id="accordion1" class="accordion">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#accordion1-item1" aria-expanded="false" aria-controls="accordion1-item1">
        A
      </button>
    </h2>
    <div id="accordion1-item1" class="accordion-collapse collapse" data-bs-parent="#accordion1">
      <div class="accordion-body">
        Content of A
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#accordion1-item2" aria-expanded="false" aria-controls="accordion1-item2">
        B
      </button>
    </h2>
    <div id="accordion1-item2" class="accordion-collapse collapse" data-bs-parent="#accordion1">
      <div class="accordion-body">
        Content of B
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#accordion1-item3" aria-expanded="false" aria-controls="accordion1-item3">
        C
      </button>
    </h2>
    <div id="accordion1-item3" class="accordion-collapse collapse" data-bs-parent="#accordion1">
      <div class="accordion-body">
        Content of C
      </div>
    </div>
  </div>
</div>