All About Pies

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus diam lacus, feugiat sit amet augue at, accumsan commodo metus. Pellentesque dignissim porttitor arcu. Aliquam euismod tempus urna, id commodo libero pharetra quis. Donec sem eros, luctus id varius ut, tempus ac tellus. Pellentesque risus est, varius eu arcu vitae, interdum interdum odio. Sed sit amet elementum orci. Maecenas tempor velit ullamcorper, pellentesque quam eget, ultrices orci. Etiam volutpat ex vel tincidunt varius. Donec et tempus ligula. Quisque congue non magna at aliquet.

Sed vestibulum dignissim lectus et consequat. Nam sed nisl aliquam, ultricies felis a, lacinia urna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum vel ex bibendum mi imperdiet ornare. Nam et lectus eget turpis ultrices tempor. Duis et arcu pellentesque, vehicula ante sit amet, facilisis augue. Sed maximus efficitur justo nec pharetra. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus vel suscipit nibh.

All About Cakes

Vivamus lacus nisi, semper at accumsan sed, pellentesque in magna. In sit amet est nec tortor finibus vehicula eu non dui. Sed dictum ac mi non finibus. Aliquam molestie sem eu euismod lacinia. Morbi gravida placerat mi ut luctus. Morbi a odio nisi. Ut quis elit ac enim congue consequat non vel nunc. Phasellus non sagittis lorem. In sit amet velit vel risus finibus lacinia. Duis in quam quis urna cursus fermentum eget non lorem. Nulla consectetur eleifend fringilla.

Let's Talk Ice Cream

Donec sed felis mauris. Proin in neque at enim congue sodales volutpat vitae leo. Duis volutpat purus dictum neque volutpat, et volutpat nulla rhoncus. Morbi sagittis id sapien eget iaculis. Sed elementum ultrices magna sed rhoncus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin fermentum eu mi eu maximus. Aenean euismod velit at nulla laoreet, in tincidunt massa tempor. Donec nec sagittis augue. Aliquam erat volutpat. Cras id cursus ex.

Script

var tabs = new Toggle({
  buttonClassExpanded: 'tab-active',
  buttonSelector: '#{id}',
  expandOnly: true,
  single: true,
  targetSelector: '.tab-panel'
})

HTML

<ul class="tabs">
  <li><a href="#pies">Pies</a></li>
  <li><a href="#cakes">Cakes</a></li>
  <li><a href="#ice-cream">Ice Cream</a></li>
</ul>

<div id="pies" class="tab-panel" aria-expanded="true">
  <h1>All About Pies</h1>
  <p>Lorem ipsum...</p>
</div>

<div id="cakes" class="tab-panel">
  <h1>All About Cakes</h1>
  <p>Vivamus lacus...</p>
</div>

<div id="ice-cream" class="tab-panel">
  <h1>Let's Talk Ice Cream</h1>
  <p>Donec sed...</p>
</div>

CSS

/* Hide collapsed */
[aria-expanded="false"] {
  display: none;
}

/* Tabs */
.tabs {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tabs > li {
  float: left;
}
.tab-active {
  background: #2e97d2;
}