Nunc in pharetra velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Donec non libero vitae augue consequat aliquet. Fusce euismod bibendum orci at placerat. Vivamus ultricies augue in tortor pharetra convallis. Maecenas gravida ex a sed vulputate, sodales cursus risus blandit.
Proin pharetra felis et odio porttitor, et egestas tortor laoreet. Sed dapibus orci id sapien placerat, a consequat augue efficitur.
.mod-tabbed-details
ul.tabs
li: a href='#coverage' Proin aliquam tortor
li.active: a href='#term' Et aliquam dignissim
.content#coverage
.mod-calculator-with-links
h4 Aliquam sapien enim
ul
li
span Elementum
span.value $1,000,000
a href='#' Massa sit amet
li
span Pretium egestas
span.value $10,000
a href='#' Mauris semper faucibus
li
span Tellus
span.value $---
a href='#' Auctor mauris
h4 Your Aenean suscipit
ul
li
span Lacinia
span.value $1,000,000
a href='#' Varius massa
li
span Suspendisse erat dolor
span.value $10,000
a href='#' Auctor sed eleifend
li
span Elementum
span.value $---
a href='#' Massa eget
h4 Dictum et
ul
li
span Consectetur ornare
span.value $1,000,000
li
span Ultrices ullamcorper
span.value $---
li
span In rhoncus orci et
span.value $1,000,000
li
span Ut euismod diam tincidunt
span.value
| = $1,000,000
li
span Vivamus eu
span.value aliquet sapien
.content.active#term
h3 Ut scelerisque nulla at sem suscipit.
p Nunc in pharetra velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
h4 Donec imperdiet leo id odio tincidunt, eget blandit nisi fermentum. Donec non libero vitae.
p Donec non libero vitae augue consequat aliquet. Fusce euismod bibendum orci at placerat. Vivamus ultricies augue in tortor pharetra convallis. Maecenas gravida ex a sed vulputate, sodales cursus risus blandit.
.term-graph
.area
.divider data-value='0' style='left: 0'
.divider data-value='10' style='left: 25%'
.divider data-value='20' style='left: 50%'
.divider data-value='30' style='left: 75%'
.divider data-value='40' style='left: 100%'
.current style='left: 80%'
.item
.label Your Kids
.line
.bar style='width: 60%'
.item
.label
| Suspendisse
.sublabel Molestie vel sapien at posuere
.line
.bar style='width: 80%'
.item
.label
| Phasellus viverra
.sublabel Nulla maximus congue dolor sed
.line
.bar style='width: 80%'
.item
.label Nunc mattis
.line
.bar style='width: 55%'
p Proin pharetra felis et odio porttitor, et egestas tortor laoreet. Sed dapibus orci id sapien placerat, a consequat augue efficitur.
css:
.mod-tabbed-details { max-width: 600px; }
$(function() {
$('.mod-tabbed-details .tabs a').on('click', function(e) {
e.preventDefault();
var $this = $(this),
target = $this.attr('href');
$('.mod-tabbed-details .tabs li').removeClass('active');
$('.mod-tabbed-details .content').removeClass('active');
$this.parent().toggleClass('active');
$(target).toggleClass('active');
});
});