Nation Library - Accordion example

Shows to to create an accordion with the Accordion class

by NationStudio

HTML

<script src="https://techdocs.wearenation.co.uk/nation/Utils.js"></script>
<script src="https://techdocs.wearenation.co.uk/nation/EventDispatcher.js"></script>
<script src="https://techdocs.wearenation.co.uk/nation/Animation.js"></script>
<script src="https://techdocs.wearenation.co.uk/nation/Accordion.js"></script>
<script src="https://techdocs.wearenation.co.uk/nation/VerticalScrollbar.js"></script>
<div class="js-accordion">
  <h2 class="js-header">Item Title</h2>
  <div class="js-content">
    <div>
      <p>Mauris in dolor velit. Aliquam euismod leo justo, ut fermentum neque rutrum nec. Suspendisse mi leo, facilisis non iaculis vitae, vehicula laoreet mauris. Nulla facilisi. Mauris nec erat et risus auctor feugiat in vitae velit. In ac aliquam enim. Sed vestibulum dolor a lorem interdum blandit.</p>
    </div>
  </div>
  <h2 class="js-header">Item Title</h2>
  <div class="js-content">
    <div>
      <p>Mauris in dolor velit. Aliquam euismod leo justo, ut fermentum neque rutrum nec. Suspendisse mi leo, facilisis non iaculis vitae, vehicula laoreet mauris. Nulla facilisi. Mauris nec erat et risus auctor feugiat in vitae velit. In ac aliquam enim. Sed vestibulum dolor a lorem interdum blandit. Morbi dignissim porttitor congue. Phasellus maximus massa sit amet vehicula vehicula.</p>
      <p>Mauris in dolor velit. Aliquam euismod leo justo, ut fermentum neque rutrum nec. Suspendisse mi leo, facilisis non iaculis vitae, vehicula laoreet mauris. Nulla facilisi. Mauris nec erat et risus auctor feugiat in vitae velit. In ac aliquam enim. Sed vestibulum dolor a lorem interdum blandit. Morbi dignissim porttitor congue. Phasellus maximus massa sit amet vehicula vehicula.</p>
    </div>
  </div>
  <h2 class="js-header">Item Title</h2>
  <div class="js-content">
    <div>
      <p>Mauris in dolor velit. Aliquam euismod leo justo, ut fermentum neque rutrum nec. Suspendisse mi leo, facilisis non iaculis vitae, vehicula laoreet mauris. Nulla facilisi. Mauris nec erat et...

CSS

.js-accordion {
  width: 100%;
  max-width: 400px;
  border-bottom: 1px solid #ccc;
}

.js-header {
  margin: 0;
  padding: 0 5px;
  font-family: sans-serif;
  border-width: 1px 1px 0 1px;
  border-style: solid;
  border-color: #ccc;
  cursor: pointer;
}
.js-header.active {
  background: #fff;
}

.js-content {
  position: relative;
  border-width: 1px 1px 0 1px;
  border-style: solid;
  border-color: #ccc;
  overflow: hidden;
}

.js-content p {
  padding: 0 35px 0 5px;
}

.js-scrollbar {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 20px;
  border-left: 1px solid #eee;
  background: #ddd;
}

.js-handle {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background: #fff;
}

.js-track {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.js-scrollbar.disabled {
  visibility: hidden;
}

JavaScript

var element = document.documentElement.querySelector(".js-accordion");

var options = {
  easing: "easeInOutQuad",
  openPanel: 0,
  maxPanelHeight: 150
};

var accordion = new NATION.Accordion(element, options);