<div class="o-accordion ">

    <h2>
        <button class="o-accordion__button js-accordion-toggle " aria-expanded="false" data-targetid="panel-id" data-closedelay="5">

            Button targeting ID

            <span class="o-accordion__icon" aria-hidden="true">

                <span class="c-directions__accordion-icon" aria-hidden="true">
                    <svg width="14" height="15" viewbox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M0 7L14 7" class="u-ct-stroke" />
                        <path d="M7 14.1421L7 -4.62532e-05" class="u-ct-stroke" />
                    </svg>

                </span>

            </span>

        </button>
    </h2>

    <div id="panel-id" class="o-accordion__panel js-accordion-panel " aria-hidden="true" tabindex="-1">

        <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>

    </div>

</div>
{% 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>
{
  "pageColorTheme": "teal",
  "title": "Button targeting ID",
  "closeDelay": "5",
  "hTag": "h2",
  "panelID": "panel-id",
  "icon": "{% block accordionContent %}"
}
  • Content:
    // MINIMUM STYLES
    .o-accordion__button {
      position: relative;
      min-height: 4.4rem;
    }
    
    .o-accordion__button--inline {
      display: inline-flex;
      align-items: center;
    }
    
    .o-accordion__panel {
      display: none;
    
      &.is-open {
        display: block;
      }
    }
    
    .o-accordion__panel--animate {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease-in-out;
      padding: 2rem;
      background-color: grey;
    
      &.can-animate {
        max-height: 100rem;
        overflow: hidden;
      }
    }
    
    .o-accordion__icon {
      position: absolute;
      right: 1.2rem;
      top: 50%;
      transform: translateY(-50%);
      display: block;
      transition: transform 0.3s ease-in-out;
    
      .is-open & {
        transform: translateY(-50%) rotate(45deg);
      }
    }
    
    .o-accordion__icon--inline {
      position: relative;
      right: auto;
      top: -0.3rem;
      transform: none;
      display: inline-block;
      margin-left: 1.2rem;
    
      .is-open & {
        transform: rotate(45deg);
      }
    
      svg {
        display: block;
      }
    }
    
  • URL: /components/raw/accordion/accordion.scss
  • Filesystem Path: patterns\04-objects\accordion\accordion.scss
  • Size: 1 KB

Accordion

This component contains the base markup for an accordion item.