jQuery addClass example

Change class name on click in jQuery

by Satheesh Kumar

HTML

<div class="title-header">

</div>
<div class="title-help">

</div>


<br/>
<br/>
<br/>
<br/>

<input class="currentSlide" value="0" style="opacity: 0">
<button class="prev">
Previous
</button>
<button class="next">
Next
</button>

<br/>
<br/>
<br/>
<br/>
<div class="slide-body">
  <div class="slide-content">
    <h2>
      Heading
    </h2>
    <p>
      Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id elit non mi porta gravida at eget metus. Vestibulum id ligula porta felis euismod semper. Maecenas faucibus mollis interdum. Cum sociis
      natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur.
      Sed posuere consectetur est at lobortis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
      ridiculus mus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vestibulum id
      ligula porta felis euismod semper. Cras mattis consectetur purus sit amet fermentum.
    </p>
  </div>
  <div class="slide-content">
    <h2>
      Heading
    </h2>
    <p>
      Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id elit non mi porta gravida at eget metus. Vestibulum id ligula porta felis euismod semper. Maecenas faucibus mollis interdum. Cum sociis
      natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa...

CSS

body {
   padding-top: 50px;
 }

 .title {
   text-align: center;
   color: #000000;
   font-family: sans-serif;
   font-size: 30px;
   font-weight: 600;
   animation: animateElement linear .4s;
   animation-iteration-count: 1;
 }

 @keyframes animateElement {
   0% {
     opacity: 0;
     transform: translate(0px, 20px);
   }
   100% {
     opacity: 1;
     transform: translate(0px, 0px);
   }
 }

JavaScript

/* $(".sample").click(function(){
sad();
}); */
/* function sad(){
$(".title").css({
"transform": "translateY(-20px)",
"opacity": "0",
"transition": "transform linear 0.4s, opacity ease-out 0.3s"
}).fadeOut(function(){
$(this).detach();
$("body").append('<div class="title" style="">Sample second append</div>');
});
} */


(function() {
  var a = $(".currentSlide"),
    b = parseInt(a.val()),
    l = b,
    c = [
      "question number 1",
      "question number 2",
      "question number 3",
      "question number 4"
    ],
    f = $(".title-header"),
    z = $(".title"),
    h = $(".title-header"),
    i = '<div class="title" style="">' + c[l] + '</div>',
    d = function() {

      f.append(i);
    }();
  var e = function(k) {
      var z = $(".title");
      z.css({
        "transform": "translateY(-20px)",
        "opacity": "0",
        "transition": "transform linear 0.4s, opacity ease-out 0.3s"
      }).fadeOut(function() {
        $(this).remove();
        h.append('<div class="title" style="">' + c[k] + '</div>');
      });
      if (c.length === (k + 1)) {
        $(".next").hide();
      } else {
        $(".next").show();
        /* alert("not"); */
      }
      if (k === 0) {
        $(".prev").hide();
      } else {
        $(".prev").show();
      }

    },
    j = function() {
      $(".next").click(function() {

        var k = l + 1;
        l = k;
        e(k);

      });
      $(".prev").click(function() {

        var k = l - 1;
        l = k;
        e(k);

      });
    }(),
    k = function() {
      $(".slide-content").each(function(index) {
        $(this).attr("data-value", index);
      });
    }();
})();