Add Navigation Buttons To jQuery UI Tabs Widget - Tabs.Neighbors

Tabs.Neighbors is a JQuery plugin for creating navigation buttons for the default jQuery UI tabs widget that allows the visitor to switch between tabbed panels by click on the next / prev arrows.

How to use it:

1. Add jQuery library and jQuery UI to your webpage.

<link rel="stylesheet" href="/path/to/jquery-ui.css">
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/jquery-ui.min.js"></script>

2. Make sure the jquery-ui.tabs.neighbors.js script is loaded after jQuery library.

<script src="jquery-ui.tabs.neighbors.js"></script>

3. Add next / previous buttons to the regular jQuery UI tabs widget as follow:

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Tab 1</a></li>
    <li><a href="#tabs-2">Tab 2</a></li>
    <li><a href="#tabs-3">Tab 3</a></li>
  </ul>
  <div id="tabs-1">
    <p>Content 1</p>
  </div>
  <div id="tabs-2">
    <p>Content 2</p>
  </div>
  <div id="tabs-3">
    <p>Content 3</p>
  </div>
  <button class="prev">&lt;</button>
  <button class="next">&gt;</button>
</div>

4. Initialize the tabs widget and active the navigation buttons.

$('#tabs').tabs({
  neighbors: {
    prev: $('button.prev'),
    next: $('button.next')
  }
});

5. Style the navigation buttons in the CSS.

button {
  ...
}

button.prev { ... }

button.next { ... }

Change log:

2017-02-17

• v1.0.3

---

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