Accordion: Open By Default

{% set btnExpanded = openDefault == 'true' ? 'true' : 'false' %}
{% set panelExpanded = openDefault == 'true' ? 'false' : 'true' %}

{% if btnAfter %}
  {% set panelID = panelID is defined ? panelID : 'accordion-panel-' ~ random(5000) %}
{% endif %}

<div class="o-accordion {{ classes }}">
  {% if not btnAfter %}
    {% if hTag %}<{{ hTag }}{% if hTagClasses %} class="{{ hTagClasses}}"{% endif %}>{% endif %}
      <button class="o-accordion__button js-accordion-toggle {{ buttonClasses }}{% if openDefault %} is-open{% endif %}{% if autoClose %} js-accordion-auto-close{% endif %}{% if closeOutsideClick %} js-accordion-close-outside-click{% endif %}{% if inlineButton %} o-accordion__button--inline{% endif %}" aria-expanded="{{ btnExpanded }}" {% if panelID %} data-targetid="{{ panelID }}" {% endif %} {% if closeDelay %} data-closedelay="{{ closeDelay }}" {% endif %}>
        {% block buttonContent %}
          {{ title }}
          {% if icon %}
            <span class="o-accordion__icon" aria-hidden="true">
              {% block icon %}
                <span class="c-directions__accordion-icon" aria-hidden="true">
                  {% include "03-icons/plus" %}
                </span>
              {% endblock %}
            </span>
          {% endif %}
        {% endblock %}
      </button>
    {% if hTag %}</{{ hTag }}>{% endif %}
  {% endif %}

  <div
    {% if panelID or btnAfter %}id="{{ panelID }}" {% endif %}
    class="o-accordion__panel js-accordion-panel {{ panel_classes }}{% if openDefault %} is-open can-animate{% endif %}"
    aria-hidden="{{ panelExpanded }}"
    tabindex="-1"
  >
    {% block accordionContent %}
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
      <p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
    {% endblock accordionContent %}
  </div>

  {% if btnAfter %}
    {% if hTag %}<{{ hTag }}{% if hTagClasses %} class="{{ hTagClasses}}"{% endif %}>{% endif %}
      <button class="o-accordion__button js-accordion-toggle {{ buttonClasses }}{% if openDefault %} is-open{% endif %}{% if autoClose %} js-accordion-auto-close{% endif %}" aria-expanded="{{ btnExpanded }}" data-isafter="true" data-targetid="{{ panelID }}" {% if closeDelay %} data-closedelay="{{ closeDelay }}" {% endif %}>
        {% block buttonContent %}
          {{ title }}
          {% if icon %}
            <span class="o-accordion__icon" aria-hidden="true">
              {% block icon %}
                <span class="c-directions__accordion-icon" aria-hidden="true">
                  {% include "03-icons/plus" %}
                </span>
              {% endblock %}
            </span>
          {% endif %}
        {% endblock %}
      </button>
    {% if hTag %}</{{ hTag }}>{% endif %}
  {% endif %}
</div>