Collapsible.js

A simple click-to-collapse jQuery-based script

by Bart Kalisz

HTML

<div id="collapsers">
  <div class="collapser" data-collapser="1">
    Toggle #1
  </div>
  <div class="collapser" data-collapser="2">
    Toggle #2
  </div>
  <div class="collapser" data-collapser="3">
    Toggle #3
  </div>
</div>

<div id="collapsees">
  <div class="collapsee" data-collapsee="1">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac lacus ac ex consectetur viverra non sit amet mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi sed dolor tellus. Curabitur id massa id arcu sagittis hendrerit nec eu nisi. Sed vel egestas enim. Nunc sit amet rhoncus velit. Phasellus pulvinar dignissim libero eget varius. Aenean elit felis, posuere vel ante at, mollis bibendum nisl. Quisque lacinia turpis vel neque sodales, venenatis laoreet orci rhoncus. Aenean lobortis erat quis lectus fringilla convallis. Etiam sollicitudin, nulla non rutrum blandit, odio elit condimentum diam, in dictum risus dui vitae dui.
  </div>
  <div class="collapsee" data-collapsee="2">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac lacus ac ex consectetur viverra non sit amet mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi sed dolor tellus. Curabitur id massa id arcu sagittis hendrerit nec eu nisi. Sed vel egestas enim. Nunc sit amet rhoncus velit. Phasellus pulvinar dignissim libero eget varius. Aenean elit felis, posuere vel ante at, mollis bibendum nisl. Quisque lacinia turpis vel neque sodales, venenatis laoreet orci rhoncus. Aenean lobortis erat quis lectus fringilla convallis. Etiam sollicitudin, nulla non rutrum blandit, odio elit condimentum diam, in dictum risus dui vitae dui.
  </div>
  <div class="collapsee" data-collapsee="3">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac lacus ac ex consectetur viverra non sit amet mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis...

SCSS

body {
  display: flex;
  flex-flow: wrap row;
  align-items: flex-start;
  margin: 0;
  padding: 30px;
  background: #20262e;
}

#collapsees {
  flex: 3;  
  padding-left: 20px;
}

#collapsers {
  flex: 1;
}

.collapsee {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  padding: 20px 40px;
  background: whitesmoke;
  border-radius: 4px;
  
  &:last-child,
  &.is-collapsed {
    margin-bottom: 0;
  }
}

.collapser {
  padding: 20px 25px;
  background: whitesmoke;
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
  transition: opacity 0.5s;

  & + & {
    margin-top: 5px;
  }

  &.is-active {
    opacity: 0.6;
  }
}

JavaScript

//-----------------------------------------------------------------------------
// Collapsible.js
//-----------------------------------------------------------------------------

var defaultProps = {
	listener: document,
	collapsedClass: "is-collapsed",
  collapsedCss: {
    overflow: "hidden",
    height: 0,
    paddingTop: 0,
    paddingBottom: 0,
    borderTopWidth: 0,
    borderBottomWidth: 0,
    borderColor: "transparent",
    color: "transparent",
    opacity: 0,
  },
  cssTransition: "all 0.5s cubic-bezier(1,-0.45,.55,1.09)",
};

function Collapsible(props) {
	this.config = $.extend({}, defaultProps, props, true);
  this.$listener = $(this.config.listener);
	this.handleCollapserClick = this.handleCollapserClick.bind(this);

	if (this.$listener.length) this.listen();
}

Collapsible.prototype.listen = function() {
	// Listen to collapser click
	this.$listener.on("click", "[data-collapser]", this.handleCollapserClick);
};

Collapsible.prototype.handleCollapserClick = function(event) {
	var id = $(event.currentTarget).data("collapser");

  // Call toggle only if collapsee with given id exists
	if (this.getCollapsee(id).length) {
	  this.toggleCollapse(id);
  } else {
  	throw new Error("Couldn't find collapsee with id=\"" + id + "\".");
  }
};

Collapsible.prototype.getElement = function(type, id) {
	var selectorAttr = "data-" + type;
  
  // Return all elements unless id given
  if (id === undefined) {
  	return $("[" + selectorAttr + "]");
  }
  
  var	cacheKey = "_cached" + type + "s";
  // Init elements cache object
  if (!this[cacheKey])	this[cacheKey] = {};
 console.log(this);
  var cachedEls = this[cacheKey],
  		$el = cachedEls[id];
	
  // Return cached element if exists
	if ($el) return $el;
  
  // Find element with given id
	$el = $("[" + selectorAttr + "='" + id + "']");
  // Add it to cached elements
  if ($el.length) cachedEls[id] = $el;

  return $el;
};

Collapsible.prototype.getCollapsee = function(id) {
  return this.getElement("collapsee",...