https://github.com/zoltantothcom/vanilla-js-tabs

Vanilla JavaScript tabs - tiny and simple.
https://github.com/zoltantothcom/vanilla-js-tabs

javascript-tabs tabs tabs-widget vanilla-javascript-tabs

Last synced: 3 months ago
JSON representation

Vanilla JavaScript tabs - tiny and simple.

• Host: GitHub
• URL: https://github.com/zoltantothcom/vanilla-js-tabs
• Owner: zoltantothcom
• License: unlicense
• Created: 2015-12-16T19:32:07.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2024-04-27T12:27:43.000Z (7 months ago)
• Last Synced: 2024-07-01T15:22:12.735Z (5 months ago)
• Topics: javascript-tabs, tabs, tabs-widget, vanilla-javascript-tabs
• Language: TypeScript
• Homepage:
• Size: 298 KB
• Stars: 61
• Watchers: 4
• Forks: 14
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-vanilla-js - Vanilla JS Tabs - Vanilla JavaScript Tabs - simple and awesome. (Components / Tabs)

README

        
# Vanilla JavaScript Tabs

[![Coverage Status](https://coveralls.io/repos/github/zoltantothcom/vanilla-js-tabs/badge.svg?branch=master)](https://coveralls.io/github/zoltantothcom/vanilla-js-tabs?branch=master) ![Dependencies](https://img.shields.io/badge/dependencies-none-brightgreen.svg)

Vanilla JavaScript Tabs - simple and awesome.

_— Inspired by the blazing fast, lightweight, cross-platform and crazy popular [Vanilla JS](http://vanilla-js.com/) framework._

## Demo

[TABS](http://zoltantothcom.github.io/vanilla-js-tabs)

## Options

| Option | Type   | Default | Description                                        |

| ------ | ------ | ------- | -------------------------------------------------- |

| elem   | string |         | HTML _id_ of the tab container in the HTML markup. |

| open   | number | 0       | Opens this tab initially.                          |

## Methods

| Method    | Type   | Description                                                                        |

| --------- | ------ | ---------------------------------------------------------------------------------- |

| open(n)   | number | Opens a tab by index                                                               |

| update(n) | number | Updates the tabs with _n_-th tab open
_(useful when dynamically adding tabs)_ |

| destroy() |        | Removes the listeners                                                              |

## Usage example

```javascript

var tabs = Tabs({

  elem: "tabs",

  open: 1,

});

```

```javascript

// Open any other tab

tabs.open(3);

```

## Running the tests

```

npm test

```

## Browser support and dependencies

| Browser    | Support | Dependencies |

| ---------- | ------- | ------------ |

| Chrome     | yes     | -            |

| Firefox    | yes     | -            |

| Safari     | yes     | -            |

| Opera      | yes     | -            |

| IE9 and up | yes     | -            |

## License

Anyone is free to copy, modify, publish, use, compile, sell, or distribute this software, either in source code form or as a compiled binary, for any purpose, commercial or non-commercial, and by any means.

See [Unlicense](http://unlicense.org) for full details.

## Related

- [Vanilla JavaScript **Carousel**](https://github.com/zoltantothcom/vanilla-js-carousel)

- [Vanilla JavaScript **Dropdown**](https://github.com/zoltantothcom/vanilla-js-dropdown)

- [Vanilla JavaScript **Tooltip**](https://github.com/zoltantothcom/vanilla-js-tooltip)

- [Vanilla JavaScript **Accordion**](https://github.com/zoltantothcom/vanilla-js-accordion)