ButtonStrip.js | Generating Inline Toggle Button with JavaScript

ButtonStrip.js is a powerful javascript toggle botton library, it allows us to create some inline toggle buttons dynamically.

How to create inline toggle buttons using ButtonStrip.js?

1.Create a div container to display toggle buttons

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

2.Import ButtonStrip.js in your html page

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

3.Create a ButtonStrip instance.

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

4.Add buttons using ButtonStrip instance

You can set the name, status, trigger event and callback function for each button.

• 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');
});

5.Append toggle buttons to the container element by append() funtion

instance.append('#content');

6.You also can use 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;
}