title: Remove class if display = none
body: <p>How to  add and remove class with the condition of CSS display. For example, I have some Div that can be hidden and shown. I want that, if the div is hidden with the <code>display:none;</code>, then the class of the div is removed. </p>
  
  <p>But if the div is shown with the <code>display:block;</code>, I want to add a class to the div. </p>
  
  <p>Here is what I have been trying: </p>
  
  <pre><code>  $(document).ready(function(){
         if($('.bigPicture').css('display') == 'block')
              {$('.bigPicture').find('div').addClass('easyzoom easyzoom--overlay');};
  
         if($('.bigPicture').css('display') == 'none')
              {$('.bigPicture').find('div').removeClass('easyzoom easyzoom--overlay');}
    });
  </code></pre>
  
  <hr>
  
  <hr>
  
  <hr>
  
  <p><strong>EXPLANATION</strong></p>
  
  <p>I have multiple slideshows in one pages. Not all of the slideshow is going to be shown in the page, one of them will only show if the link to that slideshow is clicked. It sames like auto hide and show function. If one slideshow is shown, then other slideshows are hidden.  </p>
  
  <p>Each slideshow has their own thumbnails to control them. </p>
  
  <p>The problem is all of the slideshow has no ID and has the same class, while all the slideshow is run with the same script. </p>
  
  <p>If the thumbnail in the second slideshow I click, the slideshow doesn't move. And I realize it slides only the first slideshow. </p>
  
  <p>SO, the solution is I have to remove the class of the slideshow. </p>