Bit&Black Tab Section

Lightweight Vanilla JS library for Tab Sections.

Installation

This library is made for the use with Node. Add it to your project by running

$ yarn add bitandblack-tab-section

or

$ npm install bitandblack-tab-section

Usage

1. The HTML structure

Separate the contents of your site into sections, for example like that:

<section>
    <h2>Section 1</h2>
    <!-- More content of this section... -->
</section>
<section>
    <h2>Section 2</h2>
    <!-- More content of this section... -->
</section>

A title is important here as it will be extracted as the tab's title.

2. The JavaScript part

Initialize the library like that:

import { TabSection } from "~bitandblack-tab-section";

const tabSection = new TabSection(
    document.querySelectorAll("section"),
    "h2"
);

There are three arguments:

1. The first argument tells which elements should be used as sections. This argument is required.
2. The second argument helps to extract the tab's title. This argument is required.
3. The third argument tells if the tab's titles are allowed to contain HTML content. This argument is optional and false per default.

URI fragment

Per default, the section's title will be used as URI fragment. For example if the section is titled with Hello World, the fragment will be #hello-world.

If a section has a data-tab-section attribute, the URI fragment will be taken from there: <section data-tab-section="section-1"> will become #section-1.

The title has priority #1 because its use results in more readable URIs.

You can also disable the URI fragments completely:

tabSection.setUriFragmentEnabled(false);

Callbacks

You can add callbacks for when the visibility of the tab sections change. For example:

const onTabChangeCallback = (hash, section) => {
    console.log("Tab Section has been changed.");
    console.log(hash, section);
};

tabSection.addOnTabChangeCallback(onTabChangeCallback);

3. The CSS part

Import the existing stylesheet, maybe like that:

@import "~bitandblack-tab-section/src/TabSection.scss";

The style can be customized by using the SASS variables or by using the CSS Custom Properties.

Help

If you have any questions, feel free to contact us under [email protected].

Further information about Bit&Black can be found under www.bitandblack.com.