Unitoggle Demo

Get Started

Include:

<script src="unitoggle.min.js"></script>

JS:

const toggler = new Unitoggle({
  container: document.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'
  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
});

CSS:

/* 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;
  }
}

Basic Example

HTML:

<div id='example1'>
  <button type='button' data-toggle='toggle1'>Button Toggle 1</button>
  <div id='toggle1' class='tab'>
    <p>Content Toggle 1</p>
    <button type='button' data-toggle='toggle1'>Close</button>
  </div>
</div>

JS:

const toggler = new Unitoggle({
  container: '#example1'
});

DEMO:

Accordion

HTML:

<!-- [data-toggle-accordion] - if you want close active accordion after repeat click -->
<!-- [data-toggle-group] - your group name -->
<div id='example2'>
  <button type='button' data-toggle='toggle1' data-toggle-accordion data-toggle-group='acc'>Button Toggle</button>
  <div id='toggle1' class='tab'>
    <p>Content Toggle</p>
    <button type='button' data-toggle='toggle2'>Close</button>
  </div>
  <button type='button' data-toggle='toggle2' data-toggle-accordion data-toggle-group='acc'>Button Toggle</button>
  <div id='toggle2' class='tab'>
    <p>Content Toggle</p>
    <button type='button' data-toggle='toggle2'>Close</button>
  </div>
</div>

JS:

const toggler = new Unitoggle({
  container: '#example2'
});

DEMO:

Tabs

HTML:

<div id='example3'>
  <ul>
    <li class='is-active' data-toggle='toggle1' data-toggle-group='tab'>Tab 1</li>
    <li data-toggle='toggle2' data-toggle-group='tab'>Tab 2</li>
    <li data-toggle='toggle3' data-toggle-group='tab'>Tab 3</li>
  </ul>
  <div id='toggle1' class='tab'>
    <p>Content Tab 1</p>
  </div>
  <div id='toggle2' class='tab'>
    <p>Content Tab 2</p>
  </div>
  <div id='toggle3' class='tab'>
    <p>Content Tab 3</p>
  </div>
</div>

JS:

const toggler = new Unitoggle({
  container: '#example3'
});

DEMO:

For Forms with input fields

HTML:

<div id='example4'>
  <div>
    <div>
      <label>
        <input type='radio' class='is-active' data-toggle='toggle1' data-toggle-group='radio' checked/> Radio 1
      </label>
    </div>
    <div>
      <label>
        <input type='radio' data-toggle='toggle2' data-toggle-group='radio'/> Radio 2
      </label>
    </div>
    <div>
      <label>
        <input type='radio' data-toggle='toggle3' data-toggle-group='radio'/> Radio 3
      </label>
    </div>
  </div>
  <div id='toggle1' class='tab'>
    <p>Content Radio 1</p>
  </div>
  <div id='toggle2' class='tab'>
    <p>Content Radio 2</p>
  </div>
  <div id='toggle3' class='tab'>
    <p>Content Radio 3</p>
  </div>
</div>

JS:

const toggler = new Unitoggle({
  container: '#example4',
  activateInputs: true
});

DEMO:

Nesting

DEMO:

DOM change

Demo: