JSFiddle - React, Tailwind, and code Playground

by piiantom

HTML

<div class="switch-holder">
  <label class="switch" id="switch">
      <b>&#8226;</b>
      <input type="checkbox"/>
      <span><b>&#61;</b></span>       
  </label>
</div>
<div class="slider" id="slider">
  <div class="chart">
       <img src="https://help.qlik.com/en-US/sense/June2018/Subsystems/Hub/Content/Resources/Images/ui_gen_ComboChart.png"/>
  </div>
  <div class="table">
      <img src="https://cdn-images-1.medium.com/max/1600/1*kXEEaxvKP_9xRT0HuqScTQ.gif"/>
  </div>
</div>

CSS

/* STYLE DE MISE EN PAGE, MAIS CETTE PARTIE LA, JE PENSE NE TE CONCERNE PAS */
/* SEUL TRUC A GARDER EN TETE, LE CONTENEUR SLIDER DOIT AVOIR UNE LARGEUR DE DEFINIE (% OU PX) */
body, html{height: 100%;}
.slider{
  margin: 0 auto;
  width: 90%;
  height: 90%;
}
.slider>div{
  text-align: center;
}


/* STYLE A COPIER / COLLER POUR LE LAYOUT DU SLIDER */
.slider{
  overflow: hidden;
  white-space: nowrap;
  font-size: 0;
}
.slider>div{
  display: inline-block;
  width: 100%;
  vertical-align: top;
  font-size: 1rem;
}
.slider>div{
 -moz-transition: -moz-transform 500ms cubic-bezier(0.19, 1, 0.22, 1);
  -ms-transition: -ms-transform 500ms cubic-bezier(0.19, 1, 0.22, 1);
	-o-transition: -o-transform 500ms cubic-bezier(0.19, 1, 0.22, 1);
	transition: transform 500ms cubic-bezier(0.19, 1, 0.22, 1); 
}
.slider.slide>div{
  -moz-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  -o-transform: translateX(-100%);
  transform: translateX(-100%);
}











/* SWITCH */
.switch-holder{
  width: 82px;
  margin: 0 auto 20px auto;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
.switch{
  cursor: pointer;
}
.switch>*{
  display: inline-block;
  vertical-align: middle;
  line-height: 16px;
}
.switch>b{
  margin-right: 16px;
}

.switch input[type="checkbox"] {
	display: none;
}

.switch span {
  position: relative;
  font-family: Arial;
  font-size: 1rem;
  line-height: 13px;
  display: inline-block;
  vertical-align: middle;
}
.switch span:before {
  content: ''; display: inline-block;
  vertical-align: middle;
  width: 30px;
  height: 16px;
  background-color: #919eb7;
  margin-right: 16px;
  border-radius: 10px;
 ...

JavaScript

$('#switch').on('click', function (event) {
	var isChecked = $(this).find('input').first().is(":checked");
	if (isChecked) {
  	$('#slider').addClass('slide');
  } else {
	  $('#slider').removeClass('slide');
  }
})