JSFiddle - React, Tailwind, and code Playground

by mrjordy

HTML

<div class="toggler toggler2">
  <div class="toggler2back"></div>
  <div class="toggleBall posL"></div>
  <div class="toggleTriggerL"></div>
  <div class="toggleTriggerR"></div>
</div>

<div class="toggler toggler3">
  <div class="toggler3back1"></div>
  <div class="toggler3back2"></div>
  <div class="centerpiece"></div>
  <div class="toggleBall posT"></div>
  <div class="toggleTriggerT"></div>
  <div class="toggleTriggerL"></div>
  <div class="toggleTriggerR"></div>
  
</div>

<div class="toggler toggler4">
  <div class="toggler4back1"></div>
  <div class="toggler4back2"></div>
  <div class="centerpiece"></div>
  <div class="toggleBall posT"></div>
  <div class="toggleTriggerT"></div>
  <div class="toggleTriggerL"></div>
  <div class="toggleTriggerR"></div>
  <div class="toggleTriggerB"></div>
</div>

CSS

.posM {
  margin: 3px 0px 0px 20px;
}

.toggler {
  position: relative;
  display: block;
  margin: 10px;
}

.toggler2 {
  width: 68px;
  height: 40px;
  padding-left: 10px;
  padding-top: 10px;
}

.toggler2 > .toggleTriggerL {
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    width: 37px;
    height: 40px;
    position: absolute;
    margin-left: -8px;
    margin-top: -6px;
    cursor: pointer;
}
.toggler2 > .toggleTriggerR {
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    width: 37px;
    height: 40px;
    position: absolute;
    margin-left: 29px;
    margin-top: -6px;
    cursor: pointer;
}

.toggler3 {
    width: 70px;
    height: 40px;
    padding-left: 10px;
    padding-top: 25px;
}

.toggler3 > .toggleTriggerL {
    border-radius: 20px;
    width: 40px;
    height: 36px;
    position: absolute;
    margin-left: -10px;
    margin-top: -2px;
    cursor: pointer;
}
.toggler3 > .toggleTriggerR {
    border-radius: 20px;
    width: 40px;
    height: 36px;
    position: absolute;
    margin-left: 33px;
    margin-top: -2px;
    cursor: pointer;
}
.toggler3 > .toggleTriggerT {
    border-radius: 20px;
    width: 35px;
    height: 40px;
    position: absolute;
    margin-left: 13px;
    margin-top: -26px;
    cursor: pointer;
}

.toggler4 {
    width: 70px;
    height: 52px;
    padding-left: 10px;
    padding-top: 25px;
}

.toggler4 > .toggleTriggerL {
    border-radius: 20px;
    width: 40px;
    height: 36px;
    position: absolute;
    margin-left: -10px;
    margin-top: -2px;
    cursor: pointer;
}
.toggler4 > .toggleTriggerR {
    border-radius: 20px;
    width: 40px;
    height: 36px;
    position: absolute;
    margin-left: 33px;
    margin-top: -2px;
    cursor: pointer;
}
.toggler4 > .toggleTriggerT {
    border-radius: 20px;
    width: 35px;
    height: 40px;
    position: absolute;
    margin-left: 13px;
    margin-top: -26px;
    cursor: pointer;
}
.toggler4 > .toggleTriggerB {
    border-radius:...

JavaScript

$( document ).ready(function() {
  $( ".toggleTriggerL" ).click(function() {
    $( ".toggleBall" ).removeClass( "posT posB posR posM" );
    $(".toggleBall").addClass( "posM" ).delay(300).queue(function(next){
    $(this).addClass( "posL" );
    next();
    });
  });
  $( ".toggleTriggerR" ).click(function() {
    $( ".toggleBall" ).removeClass( "posT posB posL posM" );
    $(".toggleBall").addClass( "posM" ).delay(300).queue(function(next){
    $(this).addClass( "posR" );
    next();
    });
  });
  $( ".toggleTriggerB" ).click(function() {
    $( ".toggleBall" ).removeClass( "posT posL posR posM" );
    $(".toggleBall").addClass( "posM" ).delay(300).queue(function(next){
    $(this).addClass( "posB" );
    next();
    });
  });
  $( ".toggleTriggerT" ).click(function() {
    $( ".toggleBall" ).removeClass( "posL posB posR posM" );
    $(".toggleBall").addClass( "posM" ).delay(300).queue(function(next){
    $(this).addClass( "posT" );
    next();
    });
  });
});