Natively Pronounced Mandarin

    @morsedigital/vanilla-tabbed-content

    2.2.2 • Public • Published

    vanilla-tabbed-content

    Synopsis

    A tabbed content module written in vanilla JavaScript.

    Installation

    npm install @morsedigital/vanilla-tabbed-content
    

    Running tests

    npm run test
    

    Example Instantiation

    import TabbedContentClass from '@morsedigital/vanilla-tabbed-content';
     
    const tabbedContentElements = document.querySelectorAll('.tabbed-content');
     
    if (tabbedContentElements.length > 0){
      Array.from(tabbedContentElements).map((element)=>{
        return new TabbedContentClass({
          element: element
        });
      });
    }

    Configuration

    A new instance of TabbedContentClass can contain the following in its configuration object:

    new TabbedContentClass({
      element: // The DOM node to be instantiated as having tabbed content
      , bodyContainerClass: // String. Class for the tabbed content's body. Default is "tabbed-content-body"
      , navContainerClass: // String. Class for the tabbed content's navigation. Default is "tabbed-content-nav"
      , tabContainerClass: // String. Class for each tab. Default is "tabbed-content-tab"
    });

    Example HTML structure

    <div class="tabbed-content">
      <ul class="tabbed-content-nav" role="tablist">
        <li role="presentation">
          <a href="#" role="tab">Tab 1</a>
        </li>
        <li role="presentation">
          <a href="#" role="tab">Tab 2</a>
        </li>
      </ul>
      <div class="tabbed-content-body">
        <article class="tabbed-content-tab">
          <h1>Tab 1</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </article>
        <article class="tabbed-content-tab">
          <h1>Tab 2</h1>
          <p>Doloribus quisquam, voluptatum dolores amet incidunt dicta.</p>
        </article>
      </div>
    </div>

    All tabbed content must be wrapped in a single parent div with a class of tabbed-content. The navigation is always wrapped in a div with a class of tabbed-content-nav, and the body in a div with a class of tabbed-content-body. The tabs themselves are individually wrapped in a div with a class of tabbed-content-tab.

    The relationship between navigation items and tabs is always based on their index, ie navigation item 0 will control tab 0, etc.

    CSS

    As a bare minimum, you'll require the following, or similar CSS:

    .tabbed-content-tab {
      display: none;
     
      &.active {
        display: block;
      }
    }

    Install

    npm i @morsedigital/vanilla-tabbed-content

    DownloadsWeekly Downloads

    4

    Version

    2.2.2

    License

    MIT

    Unpacked Size

    95.3 kB

    Total Files

    26

    Last publish

    Collaborators

    • morsedigital