Dynamic Inline Toggle Button In Vanilla JavaScript – ButtonStrip.js

Preview:

Description:

ButtonStrip.js is a vanilla JavaScript plugin that dynamically generates an inline toggle button to trigger actions when you click on the left or right button.

How to use it:

Create a container to hold the toggle button.

<div id="content"></div>

Import the ButtonStrip.js into the document.

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

Create a new ButtonStrip instance.

var instance = new ButtonStrip({
    id: 'buttonStrip-demo'
});

Add buttons as follows:

• pName: button name
• pActive: is active
• pType: trigger event
• pCallback: callback function

instance.addButton('jQuery', true, 'click', function(){
  console.log('jQueryScript.net');
});
instance.addButton('JavaScript', false, 'click', function(){
  console.log('CSSSCRIPT.COM');
});

Append the buttons to the container element.

instance.append('#content');

The example CSS to style the toggle button.

.button-strip {
  position: absolute;
  top: 100px;
  left: 100px;
  width: 340px;
  height: 55px;
  border: 2px solid #1496BD;
  border-radius: 3px;
  display: flex;
}
.strip-button {
  background-color: white;
  color: #1496BD;
  width: 50%;
  height: 100%;
  text-align: center;
  vertical-align: middle;
  line-height: 65px;
  transition: background-color .4s linear, color .2s linear;
  cursor: pointer;
}
.strip-button span {
  color: inherit;
}
.strip-button-text {
  font-size: 22px;
  color: #1496BD;
  margin: 0px;
  padding: 0px;
}
.active-strip-button {
  background-color: #1496BD;
  color: white;
}