MultiPanel Content Area

by Sam Fereday

HTML

<div class="content-combo">
  <div class="heading">
    <h1>
    This is a title section
    </h1>
  </div>
  <div class="menu">
    <h2 class="title">
    Header
    </h2>
    <ul class="content-menu">
      <li class="active"><a href="#">Content 1</a></li>
      <li><a href="#">Content 2</a></li>
    </ul>
  </div>
  <div class="content-area">
    <div class="content active" id="c1">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <div class="content" id="c2">
      <p>Dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </div>
</div>

CSS

body {
  font: 85%/1.4em Lato, Arial, sans-serif;
}

a {
  color: #c94231;
  text-decoration: none;
}

.heading {
  width: 100%;
  clear: both;
  float: left;
}

.menu {
  width: 30%;
  float: left;
  background: #DDD;
}

.menu .title {
  margin: 0;
  padding: 0.8em 1em 0.8em 0.6em;
}

.menu ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.menu a {
  display: block;
  padding: 1em;
  color: #fff;
  background: #CCC;
}

.menu a:hover {
  color: #c94231;
}

.menu .active a {
  font-weight: bold;
  background: #c94231;
  color: #fff;
  position: relative;
}

.menu .active a:before {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    position: absolute;
    right: -16px;
    top: 50%;
    margin-top: -16px;
    border-style: solid;
    border-width: 16px 0 16px 16px;
    border-color: transparent transparent transparent #c94231;
}

.content-area {
  width: 70%;
  float: left;
  position: relative;
}

.content {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0 1em 1em;
  display: none;
}

.content.active {
  display: block;
}

.content p {
  padding: 0;
  margin: 0;
}

JavaScript

(function() {

  // Represents a pairing of a link and a content box
  var ContentPair = function(link, content, clickCallback){

  	var self = this;

    this.linkEl = link;
    this.contentEl = content;

    this.hide();

    this.linkEl.addEventListener('click', function(){
    	
    	if(typeof clickCallback === 'function')
    		clickCallback();

    	self.show();

    });

    return this;

  };

  ContentPair.prototype.show = function(){

  	this.active = 1;
  	this.contentEl.style.display = "block";
  	this.linkEl.className = "active";

  };

  ContentPair.prototype.hide = function(){

  	this.active = 0;
  	this.contentEl.style.display = "none";
  	this.linkEl.className = "";

  };

  ContentPair.prototype.isActive = function(){

  	return this.active;

  };

  // Represents the whole box with all pairings
  var ContentCombo = function(activators, contentNodes) {

    if(activators.length !== contentNodes.length)
    	return;

    var self = this, i = 0, len = activators.length;
    this.pairings = [];

    for(i; i < len; i++) {
    	
    	var p = new ContentPair(activators[i], contentNodes[i], function(){
    		self.onClicked();
    	});

		this.pairings.push(p);

    }

    return this;

  };

  ContentCombo.prototype.onClicked = function() {

  	this.pairings.forEach(function(pair){
  		if(pair && pair.isActive())
  			pair.hide();
  	});

  };

  ContentCombo.prototype.showFirst = function() {

  	if(this.pairings.length > 0)
	  	this.pairings[0].show();

  };

  // Binds the combo boxes to the html (expects matching orderings of lists and content)
  var parents = document.querySelectorAll('.content-combo'),
  activatorParent = null,
  activators = null,
  contentNodes = null;

  parents.forEach(function(parent) {

  	activatorParent = parent.querySelector(".content-menu");
    contentNodes = parent.querySelectorAll(".content");

	if(activatorParent) {
		activators = activatorParent.getElementsByTagName("li");
	}

	new ContentCombo(activators,...