fr-tabs/tabs.html

Frend's accessible, modern tabs component.

<div class="fr-tabs js-fr-tabs">
	<ul class="fr-tabs__tablist js-fr-tabs__tablist">
		<li class="fr-tabs__tablist-item">
			<a class="fr-tabs__tab" id="tab1" href="#panel1">Tab 1</a>
		</li>
		<li class="fr-tabs__tablist-item">
			<a class="fr-tabs__tab" id="tab2" href="#panel2">Tab 2</a>
		</li>
		<li class="fr-tabs__tablist-item">
			<a class="fr-tabs__tab" id="tab3" href="#panel3">Tab 3</a>
		</li>
	</ul>
	<section class="fr-tabs__panel js-fr-tabs__panel" id="panel1">
		<h3>Tab panel 1</h3>
		<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>
	</section>
	<section class="fr-tabs__panel js-fr-tabs__panel" id="panel2">
		<h3>Tab panel 2</h3>
		<p>Mauris rhoncus commodo sapien, eu porttitor libero gravida at. Maecenas a dapibus lorem. Suspendisse fermentum neque ligula, et dapibus libero volutpat scelerisque. Cras vitae enim interdum, fringilla sapien quis, posuere purus. Morbi dictum arcu sapien, eget malesuada lorem ultricies non. Etiam tellus neque, dapibus ac rutrum ut, mollis vel nibh.</p>
	</section>
	<section class="fr-tabs__panel js-fr-tabs__panel" id="panel3">
		<h3>Tab panel 3</h3>
		<p>Quisque facilisis fermentum ex, in iaculis felis porta et. Phasellus sapien neque, sagittis vitae erat vitae, consequat vulputate lacus. Donec sit amet mattis ipsum. Ut metus ipsum, consectetur tincidunt imperdiet sed, consequat sed urna. Morbi id feugiat magna. Nunc ut aliquet quam. Morbi auctor sapien quam. Cras lorem neque, imperdiet ut mollis non, cursus scelerisque augue.</p>
	</section>
</div>