jQuery Based Responsive Tabbed Panels Plugin - Yeotabs

File Size: 36.6 KB
Views Total: 1569
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Based Responsive Tabbed Panels Plugin - Yeotabs

Yeotabs is a simple jQuery plugin that creates responsive tabbed panels and turns them into an accordion interface for small screen devices.

How to use it:

1. Include the jQuery javascript library and jQuery Yeotabs plugin's javascript and CSS in the page.

<link rel="stylesheet" href="yeoTabs.css" media="screen">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="jquery.yeoTabs.js"></script>

2. Create tabs for content within a specified container.

<div class="demo">
<div class="panels">
<div>
<label>Tab1</label>
<h2>Tab panel 1</h2>
<p>This is the first panel</p>
</div>
<div>
<label>Tab2</label>
<h2>Tab panel 2 </h2>
<p>This is the second panel</p>
</div>
<div>
<label>Tab3</label>
<h2>Tab panel 3 </h2>
<p>This is the third panel</p>
</div>
</div>
</div>

3. Call the plugin on the tabs container.

<script>
$('.demo').yeoTabs();
</script>

This awesome jQuery plugin is developed by nlemke847. For more Advanced Usages, please check the demo page or visit the official website.