Tabs Demo

Basic

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

<nav class="tabs_container">
	<a href="#tab-1" class="tabs" data-tabs-group="tab_group" data-tabs-active="true">One</a>
	<a href="#tab-2" class="tabs" data-tabs-group="tab_group">Two</a>
	<a href="#tab-3" class="tabs" data-tabs-group="tab_group">Three</a>
</nav>
<div class="tab_content" id="tab-1">
	...
</div>
<div class="tab_content" id="tab-1">
	...
</div>
<div class="tab_content" id="tab-1">
	...
</div>
$(".tabs").tabs();

Mobile Max Width

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

<nav class="tabs_container">
	<a href="#tab-1" class="tabs" data-tabs-group="tab_group" data-tabs-active="true">One</a>
	<a href="#tab-2" class="tabs" data-tabs-group="tab_group">Two</a>
	<a href="#tab-3" class="tabs" data-tabs-group="tab_group">Three</a>
</nav>
<div class="tab_content" id="tab-1">
	...
</div>
<div class="tab_content" id="tab-1">
	...
</div>
<div class="tab_content" id="tab-1">
	...
</div>
$(".tabs").tabs({
  mobileMaxWidth: 500
});

No Theme

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

<nav class="tabs_container">
	<a href="#tab-1" class="tabs" data-tabs-group="tab_group" data-tabs-active="true">One</a>
	<a href="#tab-2" class="tabs" data-tabs-group="tab_group">Two</a>
	<a href="#tab-3" class="tabs" data-tabs-group="tab_group">Three</a>
</nav>
<div class="tab_content" id="tab-1">
	...
</div>
<div class="tab_content" id="tab-1">
	...
</div>
<div class="tab_content" id="tab-1">
	...
</div>
$(".tabs").tabs({
  theme: ""
});