JSFiddle - React, Tailwind, and code Playground

by Sam Fereday

HTML

<div class="col-md-12 content-bubble no-padding as-dropdown content-toggle">
  <div class="toggle-title clearfix">

    <h3>asdasdasd</h3>

    <button class="toggler">
      <span class="glyphicon glyphicon-chevron-down">Toggles</span>
    </button>

  </div>
  <div class="content clearfix">

    <section>
      <p class="lead">Test</p>
      <p>Lorum ipsum some text</p>
    </section>

  </div>
</div>

CSS

.content {
  background: #333;
  color: #ccc;
  transition: all 0.2s ease;
}

JavaScript

(function() {

  var ToggleContent = function(activator, content, options) {

    var self = this;

    this.options = options ? options : {
      closeStr: "Open",
      openStr: "Close"
    };

    this.contentNode = content;
    this.contentNode.style.overflow = "hidden";
    this.startHeight = content.offsetHeight;

    this.closeStr = this.options.openStr;
    this.openStr = this.options.closeStr;

    this.activator = activator;
    this.activator.addEventListener('click', function(e) {
      self.toggle();
    });

    this.open = -1;
    this.contentNode.style.height = 0;
    this.activator.innerHTML = this.open > 0 ? this.options.openStr : this.options.closeStr;

  };

  ToggleContent.prototype.toggle = function() {

    this.open *= -1;
    this.contentNode.style.height = this.open > 0 ? this.startHeight + "px" : 0 + "px";
    this.activator.innerHTML = this.open > 0 ? this.options.openStr : this.options.closeStr;

  };

  var parents = document.querySelectorAll('.content-toggle'),
    toggler = null,
    content = null;

  parents.forEach(function(parent) {

    toggler = parent.querySelector(".toggler");
    content = parent.querySelector(".content");

    if (toggler && content)
      new ToggleContent(toggler, content);

  });

})();