University of Staffordshire Pattern Library

Accordion

No notes defined.

<div class="accordion">

    <details class="accordion__item">
        <summary class="accordion__title">
            <h2 class="accordion__toggle">Accordion toggle with h2</h2>
        </summary>

        <div class="accordion__content">
            <p>Some content inside</p>
            <p>Some content</p>
        </div>
    </details>

    <details class="accordion__item">
        <summary class="accordion__title">
            <h3 class="accordion__toggle">Accordion toggle with h3</h3>
        </summary>

        <div class="accordion__content">
            <p>Some content inside</p>
            <p>Some content</p>
        </div>
    </details>

    <details class="accordion__item">
        <summary class="accordion__title">
            <h4 class="accordion__toggle">Accordion toggle with h4</h4>
        </summary>

        <div class="accordion__content">
            <p>Some content inside</p>
            <p>Some content</p>
        </div>
    </details>

    <details class="accordion__item">
        <summary class="accordion__title">
            <h5 class="accordion__toggle">Accordion toggle with h5</h5>
        </summary>

        <div class="accordion__content">
            <p>Some content inside</p>
            <p>Some content</p>
        </div>
    </details>

    <details class="accordion__item">
        <summary class="accordion__title">
            <h6 class="accordion__toggle">Accordion toggle with h6</h6>
        </summary>

        <div class="accordion__content">
            <p>Some content inside</p>
            <p>Some content</p>
        </div>
    </details>

    <details class="accordion__item">
        <summary class="accordion__title">
            <span class="accordion__toggle">Accordion Toggle</span>
        </summary>

        <div class="accordion__content">
            <p>Some content inside</p>
            <p>Some content</p>
        </div>
    </details>

</div>
 
<div class="accordion">
  {% include '@accordion--item' with {
    titleElement: 'h2',
    title: 'Accordion toggle with h2',
    content: '<p>Some content inside</p><p>Some content</p>'
  } %}

  {% include '@accordion--item' with {
    titleElement: 'h3',
    title: 'Accordion toggle with h3',
    content: '<p>Some content inside</p><p>Some content</p>'
  } %}

  {% include '@accordion--item' with {
    titleElement: 'h4',
    title: 'Accordion toggle with h4',
    content: '<p>Some content inside</p><p>Some content</p>'
  } %}

  {% include '@accordion--item' with {
    titleElement: 'h5',
    title: 'Accordion toggle with h5',
    content: '<p>Some content inside</p><p>Some content</p>'
  } %}

  {% include '@accordion--item' with {
    titleElement: 'h6',
    title: 'Accordion toggle with h6',
    content: '<p>Some content inside</p><p>Some content</p>'
  } %}

  {% include '@accordion--item' with {
    title: 'Accordion Toggle',
    content: '<p>Some content inside</p><p>Some content</p>'
  } %}
</div>
  • Content: 
    // See also: fusion with list--steps in _lists.scss

.accordion {
  clear: both;
  margin-bottom: $spacing-4xl;
  border-bottom: 1px solid $grey--light;
}

.accordion__item {
  border-top: 1px solid $grey--light;

  &[open] {
    .accordion__title {
      font-weight: 500;
      background: $greyblue--superlight;
    }

    .accordion__toggle:before {
      content: '';
      transform: rotate(0deg);
      background: $neutral--primary url('#{$image-theme-directory-icon}/icon-minus-white.svg') no-repeat center center;
      background-size: 50%;
    }
  }
}

.accordion__title {
  display: block;
  margin: 0;
  padding: $spacing-lg $spacing-sm;
  font-weight: normal;
  @include line-height('headings');
  list-style: none;
  cursor: pointer;

  &:focus {
    outline: 0.1em solid rgba($neutral--primary, 0.5);
  }

  &::-webkit-details-marker {
    display: none;
  }

  @media (min-width: 40em) {
    padding: $spacing-lg $spacing-lg;
  }
}

.accordion__toggle {
  display: block;
  padding-left: 1.5em;
  color: $dark-blue;

  &:before {
    display: inline-block;
    float: left;
    content: '';
    width: 1em;
    height: 1em;
    line-height: 1;
    padding: 0;
    margin-left: -1.5em;
    background: $neutral--primary url('#{$image-theme-directory-icon}/icon-plus-white.svg') no-repeat center center;
    background-size: 50%;
    text-align: center;
    border-radius: 50%;
    vertical-align: middle;
    box-sizing: border-box;
  }
}

.accordion__content {
  padding: $spacing-sm;
  background: $greyblue--supersuperlight;
  border-top: 1px solid $grey--light;

  @media (min-width: 40em) {
    padding: $spacing-lg $spacing-lg;
  }
}

.accordion--transparent {

  & .accordion__item[open] .accordion__title {
    background: none;
  }

  & .accordion__content {
    background: none;
    border-top: 0;
  }
}
  • URL: /components/raw/accordion/_accordion.scss
  • Filesystem Path: src\components\accordion\_accordion.scss
  • Size: 1.9 KB