CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Jason Park
Jason Park

Reputation: 127

How to not apply toggle() to div elements already having display: none?

I'm trying to use slideToggle() jQuery function to my webpage.

There are some div elements that already have the style "display:none". These elements can be used in the future so that I just made them display none. The problem is that these elements also respond to toggle method so that whenever I click the button, it also appears and disappears very quickly but ugly. I don't want these elements to be shown.

Below is an example simplified.

$(document).ready(function(){
  
  var toggleBtn = $(".toggle-button");
  toggleBtn.click(function(){
    $(this).parent().find("div:not('.toggle-button')").slideToggle(); 
    });  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="toggle-button">Click</div>
  
  <div class="need-toggle-A">A</div>
  <div class="need-toggle-B">B</div>
  <div class="need-toggle-C">C</div>
  <div class="need-toggle-D">
    <div class="need-no-toggle-A" style="display:none">Please Don't show me!</div>
    <div class="need-no-toggle-B" style="display:none">Please Don't show me!!</div>
    <div class="need-no-toggle-C" style="display:none">Please Don't show me!!!</div>
    
  </div>
  
</div>

Upvotes: 3

Views: 157

Answers (3)

Akshay
Akshay

Reputation: 14348

You can use an additional :not() inside to select only the elements that doesn't contain the class need-no-toggle like this

:not([class*='need-no-toggle'])

the class* = 'need-no-toggle checks for elements containing the class need-no-toggle

For further information about the class*= read this css-tricks

$(document).ready(function(){
  
  var toggleBtn = $(".toggle-button");
  toggleBtn.click(function(){
    $(this).parent().find("div:not('.toggle-button'):not([class*='need-no-toggle'])").slideToggle(); 
    });  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="toggle-button">Click</div>
  
  <div class="need-toggle-A">A</div>
  <div class="need-toggle-B">B</div>
  <div class="need-toggle-C">C</div>
  <div class="need-toggle-D">
    <div class="need-no-toggle-A" style="display:none">Please Don't show me!</div>
    <div class="need-no-toggle-B" style="display:none">Please Don't show me!!</div>
    <div class="need-no-toggle-C" style="display:none">Please Don't show me!!!</div>
    
  </div>
  
</div>

Upvotes: 3

Triet Doan
Triet Doan

Reputation: 12085

Another solution, to make your code clear, you should rename the class to distinguish the part you want to toggle with the part you don't want to. For example:

<div class="wrapper">
  <div class="toggle-button">Click</div>

  <div class="need-toggle-A">A</div>
  <div class="need-toggle-B">B</div>
  <div class="need-toggle-C">C</div>
  <div class="need-no-toggle"> <!-- Change class name here -->
    <div class="need-no-toggle-A" style="display:none">Please Don't show me!</div>
    <div class="need-no-toggle-B" style="display:none">Please Don't show me!!</div>
    <div class="need-no-toggle-C" style="display:none">Please Don't show me!!!</div>

  </div>

</div>

Then, you can use this selector: div[class^='need-toggle'] in the find() function.

Upvotes: 0

Andi AR
Andi AR

Reputation: 2918

You can use same class name for you need to toggle

 <div class="need-toggle-A need-toggle">A</div>
  <div class="need-toggle-B need-toggle">B</div>
  <div class="need-toggle-C need-toggle">C</div>

then toggle this alone 

  $(this).parent().find(".need-toggle").slideToggle();

Jsfiddle https://jsfiddle.net/nznrru01/

Upvotes: 1

Related Questions