Handy Tabs Component with jQuery and CSS - sea.tabs

sea.tabs is a lightweight (less than 1kb) jQuery script used to show and hide a group of html content in a clean, compact tabs UI.

How to use it:

1. Create a group of tabs and tabbed content associated as follow.

<div class="seaTabs">
  <div class="seaTabs_switch">
    <div class="seaTabs_tab seaTabs_switch_active">Tab 1</div>
    <div class="seaTabs_tab">Tab 2</div>
    <div class="seaTabs_tab">Tab 3</div>
  </div>
  <div class="seaTabs_content">
    <div class="seaTabs_item seaTabs_content_active">Tab 1 content</div>
    <div class="seaTabs_item">Tab 2 content</div>
    <div class="seaTabs_item">Tab 3 content</div>
  </div>
</div>

2. Basic CSS styles for the tabs component.

.seaTabs * { box-sizing: border-box; }

.seaTabs_switch { overflow: hidden; }

.seaTabs_tab {
  float: left;
  cursor: pointer;
}

.seaTabs_switch_active { cursor: default; }

.seaTabs_item { display: none; }

.seaTabs_content_active { display: block; }

3. Add your custom CSS styles to the tabs component.

.seaTabs_switch { }

.seaTabs_tab {
  padding: 10px 20px;
  border-width: 1px 1px 1px 0;
  border-style: solid;
  border-color: #ccc;
  background: #eaeaea;
}

.seaTabs_tab:first-child {
  border-left: 1px solid #ccc;
  border-top-left-radius: 5px;
}

.seaTabs_tab:last-child { border-top-right-radius: 5px; }

.seaTabs_content { margin-top: -1px; }

.seaTabs_item {
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 0 0 5px 5px;
}

.seaTabs_switch_active {
  border-bottom: 1px solid #fff;
  background: #fff;
}

4. Include jQuery library and the jQuery sea.tabs.js script at the bottom of the web page. That's it.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/sea.tabs.js"></script>

---

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