Simple UI Javascript.

index.html

<div class="tabs">
  <div id="toggle1" class="button">
    Section 1
  </div>
  <div id="toggle2" class="button">
    Section 2
  </div>
  <div id="toggle3" class="button">
    Section 3
  </div>
  <div id="toggle4" class="button">
    Section 4
  </div>
</div>
<div class="content">
  <div id="section1" class="hidden section">
    <h1> Tab 1</h1>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
  </div>
    <div id="section2" class="hidden section">
      <h1> Tab 2</h1>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
  </div>
    <div id="section3" class="hidden section">
      <h1> Tab 3</h1>
<ul>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
   <li>Vestibulum auctor dapibus neque.</li>
</ul>
	       
  </div>
    <div id="section4" class="hidden section">
      <h1> Tab 4</h1>
<ol>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
   <li>Vestibulum auctor dapibus neque.</li>
</ol>
	       
  </div>
</div>

script.js

// convenience functions
function listen(element, events, cb){
  events = events.split(' ');
  for (var i = 0; i < events.length; i++){
    element.addEventListener(events[i], cb);  
  }
  return element;
}

function on(selector, events, cb){
  console.log(selector, events)
  elements = selector
  if (typeof(selector) == 'string'){
    elements = q(selector);
  }
  
  if (!('length' in elements)){
    console.log(elements);
    return listen(elements, events, cb)
  }
  
  for (var i = 0; i < elements.length; i++){
    listen(elements[i], events, cb);
  }
  return elements;
}

function q(element, selector, one){
  if (typeof(element) == 'string'){
    // element is implied, shift arguments.
    one = selector;
    selector = element;
    element = document;
  }
  if (one){
    return element.querySelector(selector);
  }
  return element.querySelectorAll(selector);
}

function tabHandler(tab){
  return function(e){
    e.preventDefault(); // prevent ghost clicks on mobile
    
    var _this = this;
    var section = q('#section' + tab, true);
    
    if (section.classList.contains('hidden')){
      // it was closed. Hide all other sections.
      var sections = q('.section');
      for (var i = 0; i < sections.length; i++){
        sections[i].classList.add('hidden');
      }
      
      var tabs = q('.button.active');
      for (var i = 0; i < tabs.length; i++){
        tabs[i].classList.remove('active');
      }
      
      section.classList.remove('hidden');
      _this.classList.add('active');
    }
  }
}

for (i = 0; i < 4; i++){
  var elements = on('#toggle' + (i+1), 'click touchend', tabHandler(i+1));
}

// open section 1 by default
toggle1.classList.add('active');
section1.classList.remove('hidden');

simple-ui-javascript.markdown

Simple UI Javascript.

A Pen by Paul Robbert Martin on CodePen.

License.

style.css

body, html{
  margin: 0;
  padding: 0;
}
.tabs{
  display:flex;
  align-items: stretch;
  border: 5px solid #bbb;
  border-bottom: 0px;
}
.button{
  flex: 1;
  float: left; /*fallback for older browsers; */
  background-color : #bbb;
  padding: 10px;
  cursor: pointer;
  font-family: sans-serif;
  text-align: center
}
.button:hover{
  background-color: #aaa;
}
.button.active{
  background-color: #999;
  color: #eee;
}
.button.active:hover{
  background-color: #888;
}

.section{
  border: 5px solid #bbb;
  padding: 10px;
}
.hidden{
  display:none;
}