College of Business Style Guide

Accordion Item 

<div class="accordion-item">
    <h2 class="accordion-button">
        <button aria-expanded="false">
            <span>
                Isn't it ironic, don't you think?
            </span>
        </button>
    </h2>

    <div class="accordion-text" hidden>
        <p>An old man turned ninety-eight<br /> He won the lottery and died the next day.<br /> It's a black fly in your Chardonnay<br /> It's a death row pardon two minutes too late.<br /> - Alanis Morissette</p>
    </div>
</div>
 
<div class="accordion-item">
    <h2 class="accordion-button">
        <button aria-expanded="false">
          <span>
            {{ accordion_heading }}
          </span>
        </button>
    </h2>

    <div class="accordion-text" hidden>
        {% block cms_override %}
            <p>{{ accordion_content }}</p>
        {% endblock cms_override %}
    </div>
</div>
 
{
  "accordion_heading": "Isn't it ironic, don't you think?",
  "accordion_content": "An old man turned ninety-eight<br /> He won the lottery and died the next day.<br /> It's a black fly in your Chardonnay<br /> It's a death row pardon two minutes too late.<br /> - Alanis Morissette"
}
  • Content: 
    .accordion-item {
  border-top: 1px solid $grey_lightest;
  border-right: 1px solid $grey_lightest;
  border-left: 1px solid $grey_lightest;
  border-bottom: 1px solid $white;

  //&:last-of-type {
  //  border-bottom: 1px solid $grey_lightest;
  //}

  h2 {
    margin: 0;
    font-size: 1rem;
    position: relative;


    button {
      all: inherit;
      border: 0;
      display: flex;
      justify-content: space-between;
      width: 100%;
      background-color: $grey_lightest;
      font-weight: bold;
      padding: $space-one-half $space;

      &::after {
        font-family: $font-awesome;
        content: "\f0da";
        padding: $space-three-quarter;
        top: 0;
        position: absolute;
        right: $space-double;
        -webkit-transition: all .5s ease;
        transition: all .5s ease;
      }

      &[aria-expanded="true"] {
        background-color: $gold;

        &::after {
          -webkit-transition: all 0.5s;
          transition: all 0.5s;
          transform: rotate(450deg);
        }
      }

      span {
        width: 85%;
      }
    }
  }

  .accordion-text {
    padding: $space-double $space;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    opacity: 1;

    &[hidden] {
      opacity: 0;
    }

    a {
      &:hover {
        text-decoration: underline;
      }
    }
  }
}
  • URL: /components/raw/accordion_item/accordion_item.scss
  • Filesystem Path: components/01-elements/07-accordion_item/accordion_item.scss
  • Size: 1.4 KB

No notes defined.