{"id":16346831,"url":"https://github.com/simonsmith/jquery.herotabs","last_synced_at":"2025-06-18T15:37:23.180Z","repository":{"id":57282625,"uuid":"10483521","full_name":"simonsmith/jquery.herotabs","owner":"simonsmith","description":"A tiny, fully accessible tab switcher for jQuery.","archived":false,"fork":false,"pushed_at":"2017-05-23T08:30:55.000Z","size":397,"stargazers_count":48,"open_issues_count":0,"forks_count":7,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-05-18T07:11:31.047Z","etag":null,"topics":["javascript","jquery","tab-navigation"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/simonsmith.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-06-04T16:41:48.000Z","updated_at":"2023-08-25T09:26:46.000Z","dependencies_parsed_at":"2022-08-31T03:00:31.703Z","dependency_job_id":null,"html_url":"https://github.com/simonsmith/jquery.herotabs","commit_stats":null,"previous_names":[],"tags_count":27,"template":false,"template_full_name":null,"purl":"pkg:github/simonsmith/jquery.herotabs","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simonsmith%2Fjquery.herotabs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simonsmith%2Fjquery.herotabs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simonsmith%2Fjquery.herotabs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simonsmith%2Fjquery.herotabs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/simonsmith","download_url":"https://codeload.github.com/simonsmith/jquery.herotabs/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simonsmith%2Fjquery.herotabs/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260515085,"owners_count":23020617,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","jquery","tab-navigation"],"created_at":"2024-10-11T00:37:44.091Z","updated_at":"2025-06-18T15:37:18.168Z","avatar_url":"https://github.com/simonsmith.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# jQuery Herotabs [![Build Status](https://travis-ci.org/simonsmith/jquery.herotabs.svg?branch=master)](https://travis-ci.org/simonsmith/jquery.herotabs)\n\nA tiny, fully accessible tab switcher for jQuery.\n\nUseful for standard tabs and also 'hero' style tabs often found at the top of websites to display content.\n\n## Demo\n\nhttps://codepen.io/simonsmith/full/wdYRva/\n\n## Features\n\n* Fade between tabs using **CSS3 transitions** with `.animate()` fallback\n* Tested with jQuery **1.12.0+**\n* Keyboard navigation\n* WAI-ARIA (via http://www.accessibleculture.org/articles/2010/08/aria-tabs/)\n* Focus on tab contents\n* Touch events\n* Flexible HTML\n* Rotate tabs with a delay\n\n## Installation\n\n### npm\n\nIt's recommended to `require`/`import` the plugin as part of an existing webpack or browserify setup:\n\n```\nnpm install jquery jquery.herotabs --save\n```\n\n```js\n// index.js\nconst $ = require('jquery');\nrequire('jquery.herotabs');\n$('#tabs').herotabs();\n```\n\nHerotabs relies on jQuery as a `peerDependency` so ensure it is installed in\nyour application.\n\n### Manual\n\nClone the repository and run `npm install \u0026\u0026 npm run build`. This will generate\na UMD version of the plugin in `./build` that can be dropped into a project\nhowever you want.\n\n```html\n\u003cscript src=\"http://code.jquery.com/jquery-latest.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"jquery.herotabs.js\"\u003e\u003c/script\u003e\n```\n\n## Usage\n\n### JS\n\n```js\n$('.tabs').herotabs({\n  // options\n});\n```\n\n### HTML\n\nA simple example of markup.\n\n```html\n\u003cdiv class=\"tabs\"\u003e\n  \u003cul class=\"js-herotabs-nav\"\u003e\n    \u003cli class=\"js-herotabs-nav-item\"\u003e\u003ca href=\"#tab1\"\u003eItem 1\u003c/a\u003e\u003c/li\u003e\n    \u003cli class=\"js-herotabs-nav-item\"\u003e\u003ca href=\"#tab2\"\u003eItem 2\u003c/a\u003e\u003c/li\u003e\n    \u003cli class=\"js-herotabs-nav-item\"\u003e\u003ca href=\"#tab3\"\u003eItem 3\u003c/a\u003e\u003c/li\u003e\n  \u003c/ul\u003e\n  \u003cdiv class=\"js-herotabs-tab\" id=\"tab1\"\u003e\n    \u003cp\u003econtent 1\u003c/p\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"js-herotabs-tab\" id=\"tab2\"\u003e\n    \u003cp\u003econtent 2\u003c/p\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"js-herotabs-tab\" id=\"tab3\"\u003e\n    \u003cp\u003econtent 3\u003c/p\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\nHerotabs depends on classnames rather than a specific structure so feel free to nest and shuffle your HTML as necessary. [JS prefixed classnames](http://nicolasgallagher.com/about-html-semantics-front-end-architecture/) are the default, but are not compulsory.\n\nThe only expectation it has is that your tab navigation will be contained by an element structure like the following:\n\n```html\n\u003cul class=\"js-herotabs-nav\"\u003e\n  \u003cli class=\"js-herotabs-nav-item\"\u003e\u003ca href=\"#tab1\"\u003eItem 1\u003c/a\u003e\u003c/li\u003e\n  \u003cli class=\"js-herotabs-nav-item\"\u003e\u003ca href=\"#tab2\"\u003eItem 2\u003c/a\u003e\u003c/li\u003e\n  \u003cli class=\"js-herotabs-nav-item\"\u003e\u003ca href=\"#tab3\"\u003eItem 3\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003cdiv class=\"js-herotabs-nav\"\u003e\n  \u003cspan class=\"js-herotabs-nav-item\"\u003e\u003ca href=\"#tab1\"\u003eItem 1\u003c/a\u003e\u003c/span\u003e\n  \u003cspan class=\"js-herotabs-nav-item\"\u003e\u003ca href=\"#tab2\"\u003eItem 2\u003c/a\u003e\u003c/span\u003e\n  \u003cspan class=\"js-herotabs-nav-item\"\u003e\u003ca href=\"#tab3\"\u003eItem 3\u003c/a\u003e\u003c/span\u003e\n\u003c/div\u003e\n```\n\n**Note** Your navigation anchors must link to the tab content IDs (tab behaviour), or be fully-qualified URLs (follow link behaviour).\n\n## Options\n\n* **delay** - _(number)_ How long between each tab change. If set to 0 no timed change will happen _default_ `0`\n* **duration** - _(number)_ If set to greater than zero, then this will decide how long it takes to fade transition between tabs otherwise it will be instant _default_ `0`\n* **easing** - _(string)_ Easing type, works only with CSS3 capable browsers _default_ `ease-in-out`\n* **startOn** - _(number)_ Index of the tab to show first _default_ `0`\n* **reverse** - _(boolean)_ Will reverse display order of tabs when on a timed delay _default_ `false`\n* **interactEvent** - _(string)_ Event to interact with the tab navigation. Possible values are `click` or `hover` _default_ `click`\n* **useTouch** - _(boolean)_ - If the browser supports touch then Herotabs will try to use it instead of the `interactEvent` above _default_ `true`\n* **useKeys** - _(boolean)_ - Attach key events _default_ `true`\n* **onReady** - _(function)_ - Called when the plugin has successfully instantiated. _default_ `null`\n* **onSetup** - _(function)_ - Called before the plugin has begun grabbing elements, setting up events etc. _default_ `null`\n* **css** _(object)_  Classes applied to the HTML structure\n  * **active** _(string)_ - Added to the container when the plugin has setup _default_ `is-active`\n  * **current** _(string)_ - Added to the current visible tab panel _default_ `is-current-pane`\n  * **navCurrent** _(string)_ - Added to current visible nav item _default_ `is-current-nav`\n  * **navId** _(string)_ - id to add to each nav link. Becomes `herotabs1`, `herotabs2` etc _default_ `herotabs`\n* **selectors** _(object)_ - CSS selectors to grab the HTML\n  * **tab** _(string)_ The tab panel containing the content _default_ `.js-herotabs-tab`\n  * **nav** _(string)_ The nav container _default_ `.js-herotabs-nav`\n  * **navItem** _(string)_ Each navigation item _default_ `.js-herotabs-nav-item`\n* **zIndex** _(object)_ z-index values applied to the tabs\n  * **bottom** (number) Applied to all tabs _default_ `1`\n  * **top** (number) Applied to the currently visible tab _default_ `2`\n\n### Overriding defaults for all instances\n\nIf you have multiple instances of Herotabs on one page then defaults used by all of them can be accessed via `$.fn.herotabs.defaults`:\n\n```js\n$.fn.herotabs.defaults.css.current = 'this-is-the-current-class';\n\n// Create some instances\n$('.tabs').herotabs();\n$('.other-tabs').herotabs();\n\n// Both will use `this-is-the-current-class`\n```\n\n## Events\n\nHerotabs fires various events that you can listen to. They are fired off the element that `herotabs` is instantiated  on.\n\n```js\nconst $tabs = $('.tabs').herotabs();\n\n$tabs.on('herotabs.show', function() {\n  // Do something when the tab shows!\n});\n\n$tabs.on('herotabs.show', function() {\n  // Do something else when the tab has shown!\n});\n```\n\n### Event parameters\n\nEvery event handler receives the jQuery event object and also the current\nvisible tab, the index and the current selected nav item.\n\n* **tab** - _(jQuery object)_ The currently visible tab\n* **index** - _(number)_ The index of the currently visible tab\n* **nav** - _(jQuery object)_ The current selected nav item\n\n```js\nvar $tabs = $('.tabs').herotabs();\n\n$tabs.on('herotabs.show', function(event, $tab, $index, $nav) {\n  $tab.addClass('currently-visible-tab');\n  $('body').text('The current tab index is ' + $index);\n  $nav.text('I am the current nav element');\n});\n```\n\n### herotabs.show\n\nFired when a tab is shown\n\n### herotabs.hide\n\nFired when the current tab is hidden\n\n### herotabs.next\n\nFired when the next tab is shown\n\n### herotabs.prev\n\nFired when the previous tab is shown\n\n### herotabs.start\n\nFired after the tabs have begun cycling on a timed delay\n\n### herotabs.stop\n\nFired after the tabs have stopped cycling\n\n### herotabs.mouseenter\n\nFired when the mouse enters the container of the tabs\n\n### herotabs.mouseleave\n\nFired when the mouse leaves the container of the tabs\n\n## Methods\n\nYou can get at the Herotabs instance by accessing it from the elements `.data` method\n\n```js\nconst instance = $('.tabs').herotabs().data('herotabs');\ninstance.nextTab();\n```\n\n### showTab\n\nShows a tab. Accepts a zero based index or a jQuery element\n\n```js\ninstance.showTab(2) // Index\ninstance.showTab($('.js-herotabs-tab').eq(1)) // jQuery element\n```\n\n### nextTab\n\nShows the next tab. If the current tab is the last in the set it will show the first.\n\n```js\ninstance.nextTab()\n```\n\n### prevTab\n\nShows the previous tab. If the current tab is the first in the set it will show the last.\n\n```js\ninstance.prevTab()\n```\n\n### start\n\nIf a delay is set in the options, then it will begin cycling through the tabs.\n\n```js\ninstance.start()\n```\n\n### stop\n\nIf the tabs are currently cycling, it will stop them\n\n```js\ninstance.stop()\n```\n\n### triggerEvent\n\nManually invoke a Herotabs event. Accepts an event name and jQuery object/index\n\n```js\ninstance.triggerEvent('herotabs.show', 2); // Use an index\ninstance.triggerEvent('herotabs.show', $('.a-single-tab')); // Or a jQuery object\n```\nDue to the events being attached after the plugin has initialised, this method might be useful if you have events that need to fire immediately or from somewhere else.\n\n### Chaining\n\nAll methods return the instance so you can chain as many calls as you wish\n\n```js\ninstance.showTab(2).nextTab().nextTab();\n```\n\n### Accessing the constructor\n\nIf for any reason you need to override or add your own methods then you can access the Herotabs prototype before initialising it:\n\n```js\nconst Herotabs = $.fn.herotabs.Herotabs;\nHerotabs.prototype.newMethod = function() {\n    // Something new!\n};\n\nconst instance = $('.tabs').herotabs().data('herotabs');\ninstance.newMethod();\n```\n\n#### CommonJS\n\n```js\nconst Herotabs = require('jquery.herotabs');\nHerotabs.prototype.newMethod = function() {\n    // Something new!\n};\n\nvar instance = $('.tabs').herotabs().data('herotabs');\ninstance.newMethod();\n```\n\n## Example\n\n```js\n$('.tabs')\n  .herotabs({\n    useTouch: false,\n    duration: 400,\n    interactEvent: 'hover',\n    selectors: {\n        tab: '.tab-panel',\n        navItem: '.tab-nav-item',\n        nav: '.tab-nav-container'\n    },\n    onSetup: function() {\n      // Do some setup work here\n      // e.g. generate some markup dynamically for Herotabs to attach to\n    }\n  })\n  .on('herotabs.show', function(event, $tab) {\n      $tab.text('You are looking at a tab!');\n  });\n```\n\n## Contributing\n\nIf you find a bug or need a feature added, please open an issue first.\n\n### Running the tests\n\n    npm install\n    npm test\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimonsmith%2Fjquery.herotabs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsimonsmith%2Fjquery.herotabs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimonsmith%2Fjquery.herotabs/lists"}