Lava Shortcode - Accordion

Description

Create a collapsible Bootstrap accordion to organize expandable content.

Documentation

Bootstrap accordions are a clean way of displaying a large amount of structured content on a page. While they're not incredibly difficult to make using just HTML this shortcode simplifies the markup quite a bit. The example below shows an accordion with three different sections.

{[ accordion ]}

    [[ item title:'Lorem Ipsum' ]]
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pretium tortor et orci ornare 
        tincidunt. In hac habitasse platea dictumst. Aliquam blandit dictum fringilla. 
    [[ enditem ]]
    
    [[ item title:'In Commodo Dolor' ]]
        In commodo dolor vel ante porttitor tempor. Ut ac convallis mauris. Sed viverra magna nulla, quis 
        elementum diam ullamcorper et. 
    [[ enditem ]]
    
    [[ item title:'Vivamus Sollicitudin' ]]
        Vivamus sollicitudin, leo quis pulvinar venenatis, lorem sem aliquet nibh, sit amet condimentum
        ligula ex a risus. Curabitur condimentum enim elit, nec auctor massa interdum in.
    [[ enditem ]]

{[ endaccordion ]}

The base control has the following options:

• paneltype (default) - This is the CSS panel class type to use (e.g. 'default', 'block', 'primary', 'success', etc.)
• firstopen (true) - Determines is the first accordion section should be open when the page loads. Setting this to false will cause all sections to be closed.

The [[ item ]] block configuration has the following options:

• title - The title of the section.

Markup

{%- assign wrapperId = uniqueid -%}
{%- assign firstopen = firstopen | AsBoolean -%}
<div class="panel-group" id="accordion-{{ wrapperId }}" role="tablist" aria-multiselectable="true">
  {%- for item in items -%}
      {%- assign isopen = '' -%}
      {%- if item.isopen and item.isopen !='' -%}
        {%- assign isopen = item.isopen | AsBoolean -%}
      {%- else -%}
        {%- if forloop.index == 1 and firstopen -%}
            {%- assign isopen = true -%}
        {%- else -%}
            {%- assign isopen = false -%}
        {%- endif -%}
      {%- endif -%}
      
      <div class="panel panel-{{ paneltype }}">
        <div class="panel-heading" role="tab" id="heading{{ forloop.index }}-{{ wrapperId }}">
          <h4 class="panel-title">
            <a role="button" data-toggle="collapse" data-parent="#accordion-{{ wrapperId }}" href="#collapse{{ forloop.index }}-{{ wrapperId }}" aria-expanded="{% if isopen %}true{% else %}false{% endif %}" aria-controls="collapse{{ forloop.index }}">
              {{ item.title }}
            </a>
          </h4>
        </div>
        <div id="collapse{{ forloop.index }}-{{ wrapperId }}" class="panel-collapse collapse{% if isopen %} in{% endif %}" role="tabpanel" aria-labelledby="heading{{ forloop.index }}-{{ wrapperId }}">
          <div class="panel-body">
            {{ item.content }}
          </div>
        </div>
      </div>
  {%- endfor -%}
</div>