PHPackages                             opichon/autotabs - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. opichon/autotabs

ActiveJquery-plugin

opichon/autotabs
================

JQuery plugin to generate tabs from page markup

2.1.3(10y ago)3591MITJavaScript

Since Nov 2Pushed 10y ago1 watchersCompare

[ Source](https://github.com/opichon/autotabs)[ Packagist](https://packagist.org/packages/opichon/autotabs)[ Docs](https://github.com/opichon/autotabs)[ RSS](/packages/opichon-autotabs/feed)WikiDiscussions master Synced 1mo ago

READMEChangelogDependenciesVersions (21)Used By (0)

jquery.autotabs.js - A jquery plugin that automatically generates navigable tabs based on the markup in the page.
=================================================================================================================

[](#jqueryautotabsjs---a-jquery-plugin-that-automatically-generates-navigable-tabs-based-on-the-markup-in-the-page)

jquery.autotabs.js automatically generates tabs based on the markup in your DOM element to which it is applied.

A tab is created for each child element in the designated element. Which children are used to generate tabs can be customized.

A set of navigable tabs is added to the page. The location of the tabs is cusotmizable.

Each tab can contain either static or dynamic content.

See demo/docs in docs/index.html.

Requirements
------------

[](#requirements)

- jQuery >= 1.9.1

If you want autotabs to remember the state of you tabs, you also need the jquery.cookie plugin:

- jquery.cookie.js: >= 1.4

Installation
------------

[](#installation)

### Installation via bower

[](#installation-via-bower)

Add the following lines to your bower.json configuration:

```
  "dependencies": {
    "autotabs": "~2.0",
  }
```

### Download

[](#download)

Or download from:

-
-

Setup
-----

[](#setup)

### javascripts

[](#javascripts)

```

```

### stylesheets

[](#stylesheets)

```

```

For vertical tabs, include the custom stylesheet provided:

```

```

Add the following logic to your page or to a plugin included to your page:

```
$( "#mytabs" ).autotabs(/* { options } */));
```

Markup options
--------------

[](#markup-options)

The tabs settings can be configured directly inside the markup. The following attributes are supported:

### data-autotabs-label

[](#data-autotabs-label)

The tab label.

### data-autotabs-url

[](#data-autotabs-url)

The remote url for the tab content.

### title

[](#title)

The tab label.

This attribute is deprecated in favour of the `data-autotabs-label` attribute and may be removed in future releases.

### rel (deprecated)

[](#rel-deprecated)

The remote url for the tab content.

This attribute is deprecated in favour of the `data-autotabs-url` attribute and may be removed in future releases.

How-to
------

[](#how-to)

### Load a tab pane's content dynamically via ajax

[](#load-a-tab-panes-content-dynamically-via-ajax)

Simply set the `data-autotabs-url` attribute of the tab pane to the url of the page holding the content.

### Style tabs via bootstrap

[](#style-tabs-via-bootstrap)

To style the tabs with the bootstrap stylesheet, use the following options:

```
tabs_class: "nav nav-tabs",
tab_class: null,
active_class: "active"
```

To style the tabs as pills:

```
tabs_class: "nav nav-pills",
tab_class: null,
active_class: "active"
```

Plugin options
--------------

[](#plugin-options)

### tab\_pane\_selector

[](#tab_pane_selector)

Defines the selector for identifying tab panes.

Default value: `div, section, .tab-pane`

### tab\_label\_selector

[](#tab_label_selector)

Defines the selector for identifying the label/title of the tab from an element of the tab pane.

Default value: `h1, h2, h3, h4`

### tabs\_class

[](#tabs_class)

The CSS class to set on the generated tabs element.

Default value: `autotabs`

### tab\_class

[](#tab_class)

The CSS class ot set on each generated tab element

Default value: `autotab`

### tabs\_selector

[](#tabs_selector)

The selector for identifying the element in which the generated tabs should be appended.

Default value: none

### active\_class

[](#active_class)

The CSS class to add to the tab currently selected.

Default value: `current`

### active\_tab

[](#active_tab)

The index of the tab to set as active when the plugin loads.

Default value: `null`

### cookie\_name

[](#cookie_name)

The name of the cookie in which to store the state of the tabs. This option requires the jquery.cookie.js plugin.

Default value: `active_tab`

### cookie\_path

[](#cookie_path)

The path to set on the cookie. This option requires the jquery.cookie.js plugin.

Default value: `/`

### force\_refresh

[](#force_refresh)

Forces each tab to be refreshed when clicked.

Default value: `false`

### tab\_orphans:

[](#tab_orphans)

Whether to treat an single (orphan) tab-pane as a tab or not.

Default value: `false`

### loading\_icon

[](#loading_icon)

The selector for the element containing the loading icon.

Default value: `#loading`

### tab\_id

[](#tab_id)

A function responsible for generating a tab id if not suplied in the markup.

Default value:

```
function( id ) { return "__" + id; }
```

### tab\_label

[](#tab_label)

A function responsible for generating each tab's label ifnot supplied in the markup.

Default value:

```
function( index ) { return "Tab " + ( index + 1 ); },
```

### tab\_pane\_id

[](#tab_pane_id)

A function responsible for generating the id of each tab pane if not supplied in the markup.

Default value:

```
function( index ) { return "___" + ( index + 1 ); },
```

### vertical

[](#vertical)

Whether the tabs are vertically aligned.

Default value: false

### success

[](#success)

Defines the callbacks to apply when a tab is clicked. This option can be

- a function, in which case it is applied to all tabs
- an object, where the property is the id of a tab, and the value the function to act as callback for that tab.

All functions are applied to the tab pane element. `this` therefore refers to the tab pane element.

###  Health Score

32

—

LowBetter than 72% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity13

Limited adoption so far

Community8

Small or concentrated contributor base

Maturity72

Established project with proven stability

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~60 days

Recently: every ~124 days

Total

19

Last Release

3855d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/61710b3e2bdf8cc378cb14f7e9c3d4fa753738373565270820a7be21c89f6d69?d=identicon)[opichon](/maintainers/opichon)

---

Top Contributors

[![opichon](https://avatars.githubusercontent.com/u/203745?v=4)](https://github.com/opichon "opichon (102 commits)")

---

Tags

jquerytabsautotabs

### Embed Badge

![Health badge](/badges/opichon-autotabs/health.svg)

```
[![Health](https://phpackages.com/badges/opichon-autotabs/health.svg)](https://phpackages.com/packages/opichon-autotabs)
```

###  Alternatives

[yajra/laravel-datatables-oracle

jQuery DataTables API for Laravel

4.9k33.8M335](/packages/yajra-laravel-datatables-oracle)[kartik-v/bootstrap-fileinput

An enhanced HTML 5 file input for Bootstrap 5.x, 4.x, and 3.x with features for file preview for many file types, multiple selection, ajax uploads, and more.

5.4k7.9M13](/packages/kartik-v-bootstrap-fileinput)[yajra/laravel-datatables-html

Laravel DataTables HTML builder plugin

2899.6M47](/packages/yajra-laravel-datatables-html)[kartik-v/bootstrap-tabs-x

Extended Bootstrap Tabs with ability to align tabs in multiple ways, add borders, rotated titles, and more.

1021.3M1](/packages/kartik-v-bootstrap-tabs-x)[yajra/laravel-datatables-buttons

Laravel DataTables Buttons Plugin.

2629.1M54](/packages/yajra-laravel-datatables-buttons)[kartik-v/yii2-widget-datepicker

Enhanced Yii2 wrapper for the bootstrap datepicker plugin (sub repo split from yii2-widgets).

1097.0M59](/packages/kartik-v-yii2-widget-datepicker)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)