Unitoggle

Universal toggle. Use it for tabs, accordions and other switchers.

• Any style
• Support nesting
• Disable/enable input fields
• Hash support

Demo & Documentation

Include unitoggle.min.js.

Layout

<div data-toggle="toggle-id">Toggle button</div>
<div id="toggle-id">
    Toggle Content
</div>

For Accordions

[data-toggle-accordion] - if you want close active accordion after repeat click
[data-toggle-group] - your group name (for tabs)

<div data-toggle="toggle-id1" data-toggle-accordion data-toggle-group="group-name">Button</div>
<div id="toggle-id1">
    Toggle Content
</div>
<div data-toggle="toggle-id2" data-toggle-accordion data-toggle-group="group-name">Button</div>
<div id="toggle-id2">
    Toggle Content
</div>

JS

const toggler = new Unitoggle({
    container: docucument.body, // Container: string or object. Default: document.body
    dataAttr: 'toggle', // button and group attr. Default: [data-toggle], [data-toggle-group], [data-toggle-accordion]
    activeClass: 'is-active', // active class. Default: 'is-active'
    hash: false, // hash support
    activateInputs: false, // Activate input fields (input, select, textarea) after open. Set attr [disabled] on input fields.
    onOpen: function(tab) {}, // After open callback
    onClose: function(tab) {} // After close callback
});

Demo css

.tab {
  display: none;
  opacity: 0;
}

.tab.is-active {
  display: block;
  animation: tab-is-active 0.15s ease-in-out 0.1s 1 forwards;
}

@keyframes tab-is-active {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}