jQuery addClass example

Change class name on click in jQuery

by Kamil

HTML

<p class="show">If you click on the "Hide" button, I will disappear.</p>
<p class="hide q">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus, dolores voluptas totam. Veniam ipsam error, nemo id soluta quo molestias repellat earum accusantium mollitia, consequatur enim accusamus, magni fugiat quae.</p>
<p class="hide w">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus, dolores voluptas totam. Veniam ipsam error, nemo id soluta quo molestias repellat earum accusantium mollitia, consequatur enim accusamus, magni fugiat quae.</p>
<p class="hide e">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus, dolores voluptas totam. Veniam ipsam error, nemo id soluta quo molestias repellat earum accusantium mollitia, consequatur enim accusamus, magni fugiat quae.</p>
<p class="hide r">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus, dolores voluptas totam. Veniam ipsam error, nemo id soluta quo molestias repellat earum accusantium mollitia, consequatur enim accusamus, magni fugiat quae.</p>

<button id="hide">Hide</button>
<button id="show">Show</button>

CSS

.hide {
  display: none;
}

.q {
  background-color: red;
}
.w {
  background-color: blue;
}
.e {
  background-color: green;
}
.r {
  background-color: yellow;
}

JavaScript

/* $(document).ready(function(){
  $("#hide").click(function(){
    $("p.show").fadeOut(1000);
    $("p.hide.q").fadeIn(1000);
    $("p.hide.w").fadeIn(2500);
    $("p.hide.e").fadeIn(4000);
    $("p.hide.r").fadeIn(5500);
  });
  $("#show").click(function(){
    $("p.hide").fadeOut(1000);
    $("p.show").fadeIn(1000);
  });
}); */

$( "#show" ).click(function() {
  $( "p.hide" ).first().fadeIn( "1000", function showNext() {
    $( this ).next( "p.hide" ).fadeIn( "1000", showNext );
  });
});
$( "#hide" ).click(function() {
  $( "p.hide" ).first().fadeOut( "slow", function showNext() {
    $( this ).next( "p.hide" ).fadeOut( "slow", showNext );
  });
});
/* $("#hide").click(function(){
    $("p.hide").fadeOut(1000);
  }); */