jQuery addClass example

Change class name on click in jQuery

by der_robert

HTML

<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<div class="CfdSliderWrapper">

  <div class="CfdSlider">

    <div class="CfdSliderText">

        <div class="slide_1">Test 1</div>
        <div class="slide_2">Test 2</div>
        <div class="slide_3">Test 3</div>

    </div>

    <div class="CfdSliderImage">
        <span class="image_1"><img src="https://beta2.cuffed.at/wp-content/uploads/2019/08/cuffed_misterb-glide_01.jpg"></span>
        <span class="image_2"><img src="https://beta2.cuffed.at/wp-content/uploads/2019/08/cuffed_misterb-glide_02.jpg"></span>
        <span class="image_3"><img src="https://beta2.cuffed.at/wp-content/uploads/2019/08/cuffed_misterb-glide_03.jpg"></span>        
    </div>

    <div class="CfdSliderControl">
      <input type="radio" class="goto" name="goto" id="goto_1" value="1">
      <input type="radio" class="goto" name="goto" id="goto_2" value="2">
      <input type="radio" class="goto" name="goto" id="goto_3" value="3">
    </div>

  </div>

</div>

CSS

.CfdSliderWrapper{
  width: 1140px;
  max-width: 1140px;
  background: red;
  height: 800px;
  overflow: hidden;
}

.CfdSlider{
  width: 100%;
  background: red;
  height: 800px;
  overflow: hidden;
}

.CfdSliderText{
  width: 50%;
  float: left;
}

.CfdSliderImage{
  height: auto;
  float: left;
  position: relative;
}

.CfdSliderControl{
  position: absolute;
  top: 0px;
}

.CfdSliderText span{
  display: none;
}

.CfdSliderImage span{
  position: absolute;
  left: 502px;
  top: 0px;
  display: inline-block;
  z-index: 1;
}

.CfdSliderImage span img{
  height: 800px;
}

.CfdSliderText span:first-child,
.CfdSliderImage span:first-child{
  display: block;
  left: 0px;
}

JavaScript

$(".goto").on("click",function(){
	//$(".CfdSliderImage li").hide(0);
  
  let id = $(this).val();  
  $(".image_"+id).css("zIndex","100");
	$(".image_"+id).animate({left: '0px',zIndex: '1'}, {duration: 2500});
  setTimeout(function(){
  	$(".CfdSliderImage span").not(".image_"+id).css({
    	"left":"500px"
    });
  }, 2500);

  
});