<div class="paragraph--type--accordion">
    <div class="accordion ">
        <h2 class="headline-group">
            <span class="headline-group__head">Accordions</span>
        </h2>
        <p class="">
            Introduction for accordion content. Posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet magna. Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum. Lorem ipsum dolor sit amet,
            consectetur adipiscing elit. Vivamus sagittis lacus vel.
        </p>
        <div class="js-accordion">
            <div class="js-accordion__panel">
                <h class="js-accordion__header">
                    <span class="heading__text">Accordion Panel One</span>
                </h>

                <p>

                    Nobis quis sed autem. Omnis minus aut quasi est cupiditate ut nihil vel fuga non voluptas molestiae officia esse totam velit.
                </p>
            </div>
            <div class="js-accordion__panel">
                <h3 class="js-accordion__header">
                    <span class="heading__text">Accordion Panel Two</span>
                </h3>

                <p>

                    Voluptas sed odio sit sit ullam.
                </p>
            </div>
            <div class="js-accordion__panel">
                <h3 class="js-accordion__header">
                    <span class="heading__text">Accordion Panel Three</span>
                </h3>

                <p>

                    Dolorum quis et. Vero iste omnis explicabo error culpa veritatis velit laudantium sint. Molestias odio aut voluptatem et quaerat dolorem. Et dolor dolorum laboriosam cumque qui itaque consequuntur iusto. Expedita maiores quasi quos iusto et et aliquid
                    odit assumenda inventore. Officiis nemo quas doloremque consectetur optio quo adipisci omnis optio sed veritatis maiores fuga odio voluptate itaque totam. Quo qui sint est ut omnis facilis nihil.
                </p>
            </div>
            <div class="js-accordion__panel">
                <h3 class="js-accordion__header">
                    <span class="heading__text">Accordion Panel Four</span>
                </h3>

                <p>

                    Ea cumque nihil tempora architecto quis non enim dolorem.
                    <strong>Assumenda est sunt.</strong> A sit aut culpa quo voluptatem ut. Sint consectetur voluptatibus eum omnis dolorem et eligendi dolores asperiores non explicabo consequatur culpa sunt.
                    <em>Ullam sint libero.</em> Eveniet labore velit nam cumque eligendi accusamus id doloribus quaerat expedita non. Est nihil est sunt aut possimus sint impedit nulla quibusdam temporibus eos et tempore laborum dicta. Laudantium aliquam
                    molestiae dolore exercitationem consequatur. Quae maiores consequatur laborum velit.
                </p>
            </div>
            <div class="js-accordion__panel">
                <h3 class="js-accordion__header">
                    <span class="heading__text">Accordion Panel Five</span>
                </h3>

                <p>

                    Voluptatem temporibus aut ad. Vero culpa expedita et officiis dignissimos impedit praesentium aut sed laudantium animi doloremque qui aliquid officiis ex laboriosam. Error et id adipisci magni aut. In id cum officia laudantium cumque dolores dolores.
                    <strong>Necessitatibus et amet officia assumenda et corrupti suscipit ratione facilis omnis repellendus vel reprehenderit sint facere.</strong>
                    <strong>Doloribus praesentium explicabo consequatur illum ut consequatur suscipit iure debitis hic natus soluta ab aut et dolor.</strong>
                    <strong>Magni consequuntur placeat voluptatem veritatis dolorum illum harum.</strong> Eum optio totam accusamus aut totam in. Qui quo libero eaque repudiandae ut ipsum quibusdam ut delectus velit natus. Voluptatem aut qui ut dicta
                    aut voluptas eligendi eveniet maiores autem soluta dolores illum doloremque dolore delectus. Ut nihil aut atque.
                </p>
            </div>
            <div class="js-accordion__panel">
                <h3 class="js-accordion__header">
                    <span class="heading__text">Accordion Panel Six</span>
                </h3>

                <p>

                    Ut nesciunt eveniet nihil qui aut. Sunt numquam sunt et qui illo qui rerum unde sit architecto officiis dolorem quis ad suscipit qui. Perspiciatis repellat et. Harum non quis sit qui et labore sequi adipisci odio sunt deserunt voluptatibus ut. Placeat
                    ratione molestias molestiae ratione est nihil ea sunt voluptas voluptate consequatur atque. Labore quo est repellendus minus et optio voluptatem non rem dolor facilis quia labore nesciunt.
                </p>
            </div>
        </div>
    </div>
</div>
{% if accordion.container_class %}<div class="{{ accordion.container_class }}">{% endif %}
	<div class="accordion {{ layout_component }}">
		{% if accordion.headline %}
			<h2 class="headline-group">
				<span class="headline-group__head">{{  accordion.headline }}</span>
			</h2>
		{% endif %}
		{% if accordion.p %}
			{% include "@p" with  { p:accordion.p } %}
		{% endif %}
		<div class="js-accordion{% if accordion.reversed %} js-accordion--reversed{% endif %}">
			{% for pane in accordion.panes %}
				{% if accordion.reversed %}<div class="js-accordion--inner">{% endif %}
				<div class="js-accordion__panel">
					{% include '@heading' with { heading: pane.heading } %}
					<p>
						{% include '@formatted-text' %}
					</p>
				</div>
				{% if accordion.reversed %}</div>{% endif %}
			{% endfor %}
		</div>
	</div>
{% if accordion.container_class %}</div>{% endif %}
{
  "accordion": {
    "headline": "Accordions",
    "p": {
      "content": "Introduction for accordion content. Posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet magna. Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sagittis lacus vel."
    },
    "container_class": "paragraph--type--accordion",
    "panes": [
      {
        "heading": {
          "tag": 3,
          "headline": "Accordion Panel One",
          "variant": "js-accordion__header"
        }
      },
      {
        "heading": {
          "level": 3,
          "headline": "Accordion Panel Two",
          "variant": "js-accordion__header"
        }
      },
      {
        "heading": {
          "level": 3,
          "headline": "Accordion Panel Three",
          "variant": "js-accordion__header"
        }
      },
      {
        "heading": {
          "level": 3,
          "headline": "Accordion Panel Four",
          "variant": "js-accordion__header"
        }
      },
      {
        "heading": {
          "level": 3,
          "headline": "Accordion Panel Five",
          "variant": "js-accordion__header"
        }
      },
      {
        "heading": {
          "level": 3,
          "headline": "Accordion Panel Six",
          "variant": "js-accordion__header"
        }
      }
    ]
  }
}
  • Content:
    .paragraph--type--accordion {
      .accordion__header {
        @include rr-font-compute(2xl, medium);
        width: 100%;
        padding: {
          top: rr-grid-remainder(1px, 2);
          right: rem(70px);
          bottom: rr-gridbase(2);
          left: 0;
        }
        border: 1px color(gray-lighter) solid;
        border-width: 1px 0 0;
        background-color: transparent;
        color: color(dark-teal);
        font-family: $font-rubik;
        font-weight: 500;
        text-align: left;
        text-transform: none;
        cursor: pointer;
      
        &:focus {
          // background-color: color(gray-lightest);
        }
      
        &:active,
        &:focus {
          // background-color: color(davidson-red);
          // color: color(davidson-white);
        }
      
        &:hover,
        &:active,
        &:focus {
          background-color: color(gray-lightest);
          color: color(davidson-red);
        }
      
        &:before {
          display: none;
        }
      }
      
      .accordion__title {
        position: absolute;
        left: -99999em;
      }
      
      .accordion__panel {
        margin: 0;
        padding: 0;
        transition: visibility 0s ease-in-out, max-height .3s ease-in-out, opacity .3s ease-in-out;
        opacity: 1;
        overflow: hidden;
        visibility: visible;
      
        .editorial {
          padding: {
            top: rr-gridbase(3);
            bottom: rr-gridbase(3);
          }
        }
      }
      
      [aria-hidden='true'].accordion__panel {
        max-height: 0;
        margin: 0;
        padding: 0;
        transition-delay: .3s, 0s, 0s;
        opacity: 0;
        visibility: hidden;
      }
      
      button.accordion__header {
        display: block;
        position: relative;
      
        &::after {
          position: absolute;
          top: 0;
          right: rr-gridbase(3);
          bottom: 0;
          width: rr-gridbase(3);
          transform: rotate(45deg);
          transform-origin: 50% 50%;
          transition: transform .3s ease-in-out;
          background: transparent url('data:image/svg+xml;utf-8,%3Csvg%20width%3D%2231%22%20height%3D%2231%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M23.282%2023.872l-7.897-7.897-7.897%207.897-2.59-2.59%207.896-7.897-7.897-7.897%202.59-2.59%207.898%207.896%207.897-7.897%202.59%202.59-7.897%207.898%207.897%207.897z%22%20fill%3D%22%231897d4%22%20stroke-color%3D%22%231897d4%22%20stroke-width%3D%221.5%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E') scroll no-repeat 50% 50% / contain;
          font-family: 'iconfont';
          font-size: 1.24em;
          line-height: 1;
          content: '';
        }
      
        &[aria-expanded='true']::after {
          transform: rotate(0);
        }
      }
      
      .js-accordion--inner {
        display: flex;
        flex-direction: column;
        .js-accordion__panel {
          order: 1;
        }
        .js-accordion__header {
          order: 2;
        }
      }
    }
    
    
  • URL: /components/raw/accordion/accordion.scss
  • Filesystem Path: patterns/organisms/interactive/accordion/accordion.scss
  • Size: 2.6 KB
  • Content:
    document.addEventListener('DOMContentLoaded', () => {
      accordion();
    });
    
  • URL: /components/raw/accordion/accordion-init.js
  • Filesystem Path: patterns/organisms/interactive/accordion/accordion-init.js
  • Size: 73 Bytes
  • Content:
    const accordion = () => {
        $ = jQuery;
        // Standard paragraph accordion
        $('.paragraph--type--accordion .js-accordion').accordion();
    }
    
  • URL: /components/raw/accordion/accordion.js
  • Filesystem Path: patterns/organisms/interactive/accordion/accordion.js
  • Size: 144 Bytes

There are no notes for this item.