Accordion

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam quis risus eget urna mollis ornare vel eu leo. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas faucibus mollis interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia bibendum nulla sed consectetur. Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna.

HTML

		<div class="accordion">
  <div class="accordion">
    <section class="accordion__item">
      <header class="accordion__header">
        <h2>Item 1</h2>
          <a class="accordion__edit">Edit</a>
      </header>
      <article class="accordion__content">
				<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam quis risus eget urna mollis ornare vel eu leo. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
			</article>
    </section>
    <section class="accordion__item">
      <header class="accordion__header">
        <h2>Item 2</h2>
          <a class="accordion__edit">Edit</a>
      </header>
      <article class="accordion__content">
				<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
			</article>
    </section>
    <section class="accordion__item">
      <header class="accordion__header">
        <h2>Item 3</h2>
          <a class="accordion__edit">Edit</a>
      </header>
      <article class="accordion__content">
				<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas faucibus mollis interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia bibendum nulla sed consectetur. Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
			</article>
    </section>
  </div>

SCSS

    .accordion {}

.accordion__item {
  position: relative;
  margin-top: 8px;
}

.accordion__header {
  @include clearfix();
  color: $grey;
  background: $grey-L52 url('/images/arrow-up-grey.svg') 98% 50% no-repeat;

  .accordion__item.closed & {
    background-image: url('/images/arrow-down-grey.svg');
  }

  &:hover {
    color: $grey-D10;
    background-color: $grey-L35;
  }

  h2 {
    @include small-font;
    width: 75%;
    float: left;
    margin: 0;
    padding: 8px 16px
  }

  .accordion__edit {
    @include small-font;
    text-decoration: underline;
    float: right;
    padding: 8px 32px 0 0;
  }
}

.accordion__content {
  padding: 16px 0;

  .accordion__item.closed & {
    display: none;
  }
}

Connect Dementia Research

Pattern Library

Accordion

Item 1

Item 2

Item 3

HTML

SCSS

Javascript