CODEWITHSUNDEEP
htmljquery
Muhammad Assane
Muhammad Assane

Reputation: 31

How to remove class when page loads but only once

I have a button that toggles active class on a div.

When the div has active class it is displayed and when active class is removed the div is hidden.

I want active class removed from the div when the page is loaded, but later when I click the button active class should be applied. The div should be hidden when the page loads.

I don't have access to HTML so it has to be done using jquery.

here is my code:

<button class="btn addclass">Toggle class</button>
<div class="block active">
</div>

my js:

$(document).ready(function(){
  $(window).on('load', function(){
    if($(".addclass .block").hasClass("active")){
      $(this).removeClass("active");
    }
  });
});

$(document).ready(function(){
  $(".addclass").click(function(){
    $(".block").toggleClass("active");
  });
});

CSS

.block{
  display: none;
  padding: 50px;
  background-color: red;
}
.block.active{
  display: block;
}

Upvotes: 1

Views: 2453

Answers (2)

zer00ne
zer00ne

Reputation: 43920

Since jQuery specializes in controlling all things DOM it's a shade faster and less flashing if you listen for the "DOMContentLoaded" event on the document object. By that time all of the DOM is loaded and the scripts have been parsed. If you listen to the "load" event on the window object, then everything has been loaded, that includes all the stuff you didn't need to run jQuery.

BTW if you don't already know, it's important that all <script> elements be placed right before the closing </body> tag. Of course this may not be possible for you since you have to deal with 3rd party code at page load. See this article about what was just discussed.

/*
Once document is loaded
Remove .active from .block
*/
$(document).on('DOMContentLoaded', e => $('.block').removeClass('active'));

/* ALTERNATIVE
Once document is loaded
Hide .block
/
$(document).on('DOMContentLoaded', e => $('.block').hide());
*/

/*
When .toggle is clicked...
Toggle .block to hide/show
Toggle the text of .toggle to "SHOW/HIDE"
*/
$('.toggle').on('click', function(e) {
  $(this).text($(this).text() === 'SHOW' ? 'HIDE' : 'SHOW');

  /*
  Toggle .active class on/off on .block
  */
  $('.block').toggleClass('active');

  /* ALTERNATIVE
  Toggle .block show/hide slowly
  /
  $('.block').toggle('slow');
  */
});
body {
  font: 5ch/1 Consolas;
  text-align: center;
}

button {
  font: inherit;
  cursor: pointer;
}

.block {
  display: none;
}

.active {
  display: block;
}
<button class="btn toggle">SHOW</button>
<div class="block active">ACTIVE</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Upvotes: 0

fdomn-m
fdomn-m

Reputation: 28611

In this block of code:

$(document).ready(function(){
  $(window).on('load', function(){
    if ($(".addclass .block").hasClass("active")) {
      $(this).removeClass("active");
    }
  });

this refers to the window so you can't use window here.

You also don't shouldn't nest window.load inside doc.ready (use one or the other). While doc.ready will fire even if the document is already ready, window load will only fire at the one time that it loads and that will be before doc.ready runs, so your code (probably) never runs.

Your code can be shortened to:

$(function() { 
    $(".addclass .block.active").removeClass("active"); 
});

Upvotes: 1

Related Questions