https://github.com/danielvigaru/id-tabs

https://github.com/danielvigaru/id-tabs

id-tabs npm tab-system tabs

Last synced: 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/danielvigaru/id-tabs
• Owner: danielvigaru
• License: mit
• Created: 2024-09-14T15:56:19.000Z (10 months ago)
• Default Branch: main
• Last Pushed: 2025-02-05T20:07:19.000Z (5 months ago)
• Last Synced: 2025-04-10T16:55:01.447Z (3 months ago)
• Topics: id-tabs, npm, tab-system, tabs
• Language: TypeScript
• Homepage: https://npmjs.com/package/@danielvigaru/id-tabs
• Size: 71.3 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
I wrote this library as a replacement for the jQuery plugin [idTabs by Sean Catchpole](https://www.sunsean.com/idTabs). Of course, the idea is that you don't need jQuery for this one.

[![npm](https://img.shields.io/badge/npm-FFF?style=flat&logo=npm&logoColor=fff&color=CB3837)](https://www.npmjs.com/package/@danielvigaru/id-tabs)

[![Ko-fi](https://img.shields.io/badge/Ko--fi-FF5E5B?style=flat&logo=ko-fi&logoColor=white&color=D34F4C)](https://ko-fi.com/Y8Y1DZBZU)

# How to use IdTabs

```javascript

import IdTabs from 'id-tabs';

IdTabs.init('.your-selector');

```

1. Create your content and add IDs to the containers

2. Create a list of anchors, these will be the tabs. Use the previously created IDs as hrefs, like `href="#tab-content-id"`

3. For initialization, see the examples below:

## Default tab

Set a default tab in a group by adding the class `selected` to its anchor, otherwise, the first tab will be selected by default.

# Examples

### Using your own selector

```html



    


        
Tab 1

        
Tab 2

        
Tab 3

    



Tab 1 content

Tab 2 content

Tab 3 content

```


Initialize this by running `IdTabs.init('.tab-container ul')` on page load.

### Using the default selector `class="idTabs"`

```html



    


        
Tab 4

        
Tab 5

        
Tab 6

    



Tab 4 content

Tab 5 content

Tab 6 content

```


That's all. If you use the `idTabs` class it will be initialized automatically on page load.

Note: You can use it with broad selectors that match multiple lists of anchors, it will create a new instance for each list