accordion.jade

//- Example not working in JSFiddle: https://jsfiddle.net/hjzkye9f/3/
//- тег .accordion необязателен
//- после тега .accordion-but обязательно должен идти .accordion-content
//- в .accordion-content обязательно должен быть .accordion-inner, так как из него берется высота

.accordion
  .accordion-but First
  .accordion-content
    .accordion-inner
      p Content 1
  .accordion-but Second
  .accordion-content
    .accordion-inner
      p Content 2
  .accordion-but Third
  .accordion-content
    .accordion-inner
      p Content 3

accordion.js

var Accordion = (function() {
  return {

    init: function() {
      this.cache();
    },

    cache: function() {
      this.accordionBut = document.getElementsByClassName("accordion-but");
      if (this.accordionBut) {
        this.bindEvents();
      }
    },

    bindEvents: function() {
      var self = this;

      var i;
      for (i=0; i < this.accordionBut.length; i++) {
        this.accordionBut[i].addEventListener("click", function() {
          self.toggle(this);
        });
      }

    },

    toggle: function(but) {
      var content = but.nextSibling;

      if (!parseInt(content.style.height)) {
        var contentHeight = getComputedStyle(content.children[0]).height;
        content.style.height = contentHeight;
      } else {
        content.style.height = "0";
      }
    }

  }
})();

accordion.styl

.accordion-but
  background #ccc
  padding 10px
  &:hover
    cursor pointer
.accordion-content
  transition .5s
  background #ddd
  margin 0 0 10px
  height 0
  overflow hidden
  .accordion-inner
    padding 10px