Lehigh Clutch Style Guide

Accordion Item 

<div class="card accordion_item">
    <div class="card-header" id="headingone">
        <h3 class="mb-0">
            <button class="btn btn-link btn-block text-left accordion-btn" type="button" data-toggle="collapse" data-target="#collapseone" aria-expanded="true" aria-controls="collapseone">
                <span class="accordion-button-text">
                    This is the accordion heading
                </span>
                <i class="fas fa-chevron-down"></i>
                <span class="sr-only">Show the content</span>
            </button>
        </h3>
    </div>

    <div id="collapseone" class="collapse show" aria-labelledby="headingone" data-parent="#accordiontest">
        <div class="card-body">
            This is the accordion content. Nam ornare lorem ligula, nec molestie enim facilisis eu. Quisque mi tortor, aliquet sit amet commodo ac, facilisis ut metus. Aenean vestibulum viverra suscipit. Cras consequat sagittis pretium. Donec accumsan turpis in nulla lacinia maximus. Duis et malesuada metus. Donec convallis vel dolor non feugiat.
        </div>
    </div>
</div>
 
{% set item_show = accordion_active ? ' show' : '' %}
{% set flip_arrow = accordion_active ? 'true' : 'false' %}

<div class="card accordion_item">
  <div class="card-header" id="heading{{ accordion_id }}">
    <h3 class="mb-0">
      <button class="btn btn-link btn-block text-left accordion-btn" type="button" data-toggle="collapse" data-target="#collapse{{ accordion_id }}" aria-expanded="{{ flip_arrow }}" aria-controls="collapse{{ accordion_id }}">
        <span class="accordion-button-text">
        {% block accordion_row_heading %}
        {{ accordion_heading }}
        {% endblock accordion_row_heading %}
        </span>
        <i class="fas fa-chevron-down"></i>
        <span class="sr-only">Show the content</span>
      </button>
    </h3>
  </div>

  <div id="collapse{{ accordion_id }}" class="collapse{{ item_show }}" aria-labelledby="heading{{ accordion_id }}" data-parent="#accordion{{ accordion_name }}">
    <div class="card-body">
      {% block accordion_row_content %}
        {{ accordion_content }}
      {% endblock accordion_row_content %}
    </div>
  </div>
</div>
 
{
  "accordion_name": "test",
  "accordion_heading": "This is the accordion heading",
  "accordion_content": "This is the accordion content. Nam ornare lorem ligula, nec molestie enim facilisis eu. Quisque mi tortor, aliquet sit amet commodo ac, facilisis ut metus. Aenean vestibulum viverra suscipit. Cras consequat sagittis pretium. Donec accumsan turpis in nulla lacinia maximus. Duis et malesuada metus. Donec convallis vel dolor non feugiat.",
  "accordion_id": "one",
  "accordion_active": true
}
  • Content: 
    .accordion_item {
  background-color: unset !important;
  border: 1px solid $accent_color;
  border: 1px solid var(--accent_color, $accent_color);

  .card-header {
    padding: 0;
    background-color: unset;

    button {
      padding: $space_three_quarter $space_and_one_quarter !important;

      &[aria-expanded="true"] {
        &:hover,
        &:focus {
          text-decoration: none !important;
        }
      }

      &[aria-expanded="false"] {
        .color-scheme-dark & {
          color: $white;
          color: var(--white, $white);
        }
      }

      .color-scheme-dark & {
        background-color: unset;
      }

      &:not([aria-expanded="false"]) {
        background-color: $accent_color;
        background-color: var(--accent_color, $accent_color);
      }
    }
  }

  .card-body {
    background-color: $white;
    background-color: var(--white, $white);
    color: $base_font !important;
    color: var(--base_font, $base_font) !important;

    .color-scheme-dark & {
      background-color: $dark_mode_grey;
      background-color: var(--dark_mode_grey, $dark_mode_grey);
      color: $white !important;
      color: var(--white, $white) !important;
    }
  }

  .btn.accordion-btn {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    color: $grey_darkest;
    color: var(--grey_darkest, $grey_darkest);
    font-weight: 900;
    padding: 0;
    margin:0;
    position: relative;
    width: 100%;

    &::after {
      content: '' !important;
      position: unset;
    }

    &:hover,
    &:focus {
      box-shadow: unset !important;
      text-decoration: underline;

      .color-scheme-dark & {
        color: $white;
        color: var(--white, $white);
      }

      &[aria-expanded="false"] {
        > i {
          transform: rotate(-360deg);
        }
      }
    }

    &:focus {
      box-shadow: unset !important;
    }

    .accent-lehigh_brown &,
    .accent-blue_k60 & {
      color: $grey_darkest;
      color: var(--grey_darkest, $grey_darkest);

      &[aria-expanded="true"] {
        color: $white;
        color: var(--white, $white);
      }

      .color-scheme-dark & {
        color: $white;
        color: var(--white, $white);
      }
    }

    .accordion-button-text {
      margin: 0 $space-two 0 0;
    }

    > i {
      position: absolute;
      right: $space_and_one_quarter;
      transform: rotate(-180deg);
      -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;
      -ms-transition: all 0.3s;
      -o-transition: all 0.3s;
      transition: all 0.3s;
    }

    &[aria-expanded="false"] {
      > i {
        transform: rotate(0);
      }
    }

    &[aria-expanded="true"] {
      > i {
        transform: rotate(-180deg);
      }
    }
  }

  .no-js & {
    &:hover,
    &:focus-within {
      .collapse {
        display: block;
      }
    }
  }
}
  • URL: /components/raw/accordion_item/accordion_item.scss
  • Filesystem Path: bits/03-pieces/accordion_item/accordion_item.scss
  • Size: 2.9 KB

Display a single accordion piece.