JSFiddle - React, Tailwind, and code Playground

by konglie

HTML

<h1>
Please choose your Project Preference
</h1>

<div id='display'>
</div>
<div id='template'>
  <div class='toggle'>
    <div class='track'>
    </div>
    <div class='knop'>

    </div>
    <span></span>
  </div>
</div>

CSS

* {
  font-family: Arial, Helvetica;
  font-size: 18px;
  font-weight: bold;
}

body {
  margin: 30px;
}

#display {
  margin-top: 25px;
}

#template {
  display: none;
}

.toggle {
  position: relative;
  width: 50px;
  cursor: pointer;
  margin-bottom: 30px;
}

.toggle span {
  position: relative;
  margin-left: 70px;
  top: 2px;
}

.toggle .track {
  position: absolute;
  width: 100%;
  height: 15px;
  border-radius: 5px;
  background-color: #CCC;
  top: 5px;
}

.toggle .knop {
  position: absolute;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: #DDD;
  border-color: #EEE;
  left: 0;
}

.toggle .track,
.toggle .knop {
  transition: all .4s;
}

.toggle.checked .knop {
  left: 25px;
  box-shadow: -1px 1px 10px;
}

.toggle.red.checked .knop {
  background-color: #900;
}

.toggle.green.checked .knop {
  background-color: #090;
}

.toggle.blue.checked .knop {
  background-color: #009;
}

.toggle.red.checked .track {
  background-color: #933;
}

.toggle.green.checked .track {
  background-color: #393;
}

.toggle.blue.checked .track {
  background-color: #339;
}

JavaScript

/**
created by ali LIM
konglie [at] kurungkurawal.com
just for fun
https://web.facebook.com/groups/ForumJavaIndonesia/permalink/10154303807368017/
**/

var labels = ['Good', 'Cheap', 'Fast'];
var cls = ['red', 'green', 'blue'];
var template = $('#template').html();
var display = $('#display');
for (var s in labels) {
  var container = $('<div>').html(template);
  $(container).appendTo(display)
    .find('span').text(labels[s]);
  $(container).find('.toggle').addClass(cls[s]);
}

$('.toggle').click(function() {
  $(this).toggleClass('checked');
  var nchecked = $('.checked', display).length;
  if (nchecked <= 2) {
    return;
  }

  var parent = $(this).parent('div');
  var idx = $('#display > div').index(parent) - 1;
  var toggleOffIndex = (idx < 0) ? 2 : idx;
  $($('#display > div').get(toggleOffIndex)).find('.toggle')
    .removeClass('checked');
})