Accordion

Toggle Accordion

by Thomas Orthbandt

HTML

<div class="accordion">
  <div class="row">
    <div class="accordion-wrapper">
      <div class="accordion-item">
        <button class="accordion-item-tab">
          San Francisco
          <div class="accordion-item-tab-toggle">Toggle icon</div>
        </button>
        <div style="display: none;">
          <div class="accordion-item-feature">
            <div class="tc">
              <div class="tc-content">
                <div class="large-6 medium-6 small-12 tc-copy">
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vehicula tellus sed enim massa nunc.</p>
                </div>
                <div class="tc-ctas">
                  <a href="#" class="btn tc-btn btn-tertiary">View event</a>
                  <a class="btn tc-btn btn-disabled">Event full</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

.accordion-wrapper {
  border: 1px solid #DADADB;
  border-top: none;
}

.accordion-item {
  border-top: 1px solid #DADADB;
  background: #FBFCFD;
  position: relative;
  width: 100%;
}

.accordion-item-feature {
  padding: 1rem;
}

.accordion-item-tab {
  padding: 0;
  border: none;
  background: none;
  background: none;
  border: 1px solid transparent;
  color: #45474D;
  display: block;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1.1rem;
  outline: 0;
  padding: 1.0625rem 3rem 1.0625rem 1.5rem;
  position: relative;
  text-align: left;
  -webkit-transition: 0.25s ease-out;
  transition: 0.25s ease-out;
  -webkit-transition-property: color, border, background;
  transition-property: color, border, background;
  width: 100%;
}

.accordion-item-tab:nth-of-type(1n+2) {
  border-top-color: #DADADB;
}

.accordion-item-tab.is-accordion-item-tab-active {
  background: white;
}

.accordion-item-tab.is-accordion-item-tab-active:before {
  display: block;
}

.accordion-item-tab-icon {
  fill: #A8A9AC;
  left: 2.5rem;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: fill 0.25s ease-out;
}

.is-accordion-item-tab-active .accordion-item-tab-icon {
  fill: #13B5EA;
}

.accordion-item-tab-toggle {
  color: transparent;
  font: 0/0 a;
  text-shadow: none;
  height: 1rem;
  margin-top: -0.5rem;
  position: absolute;
  right: 1.375rem;
  top: 50%;
  width: 1rem;
}

.accordion-item-tab-toggle:before,
.accordion-item-tab-toggle:after {
  background: #A8A9AC;
  content: '';
  display: block;
  height: 0.125rem;
  margin-top: -0.0625rem;
  position: absolute;
  right: 0;
  top: 50%;
  width: 1rem;
}

.accordion-item-tab-toggle:after {
  transform: rotate(90deg);
  transition: 0.25s ease-out;
  transition-property: opacity, transform;
}

.is-accordion-item-tab-active .accordion-item-tab-toggle:after {
  opacity: 0;
  -webkit-transform: rotate(0);
  transform: rotate(0);
}

.tc-content {
  overflow:...

JavaScript

$(function() {
  var _createClass = function() {
    function defineProperties(target, props) {
      for (var i = 0; i < props.length; i++) {
        var descriptor = props[i];
        descriptor.enumerable = descriptor.enumerable || false;
        descriptor.configurable = true;
        if ("value" in descriptor) descriptor.writable = true;
        Object.defineProperty(target, descriptor.key, descriptor);
      }
    }

    return function(Constructor, prototypeProps, staticProps) {
      if (prototypeProps) defineProperties(Constructor.prototype, prototypeProps);
      if (staticProps) defineProperties(Constructor, staticProps);
      return Constructor;
    };
  }();

  function _classCallCheck(instance, Constructor) {
    if (!(instance instanceof Constructor)) {
      throw new TypeError("Cannot call a class as a function");
    }
  }

  var accordion = function() {
    function accordion(accordionTab) {
      _classCallCheck(this, accordion);
      this.accordionTab = $(accordionTab);
    }

    _createClass(accordion, [{
      key: 'activate',
      value: function activate() {
        this.accordionTab.on('click', function() {
          var $this = $(this);
          $this.next().slideToggle();
          $this.toggleClass('is-accordion-item-tab-active');
        });
      }
    }]);

    return accordion;
  }();

  var xAccordion = new accordion('.accordion-item-tab');

  xAccordion.activate();

});