jQuery：单击更改具有全局代码的相似元素

Question

I have a simple code where when I click on one of the 'chevron' jquery show hided content.

But this code is completly for each one different.

Is there any solution how to make one global code to effect every element with this functionality?

In my original code, I have more elements like this.

My code:

 $('.chevron1').click(function() { $('.more-fix-broken-links').toggleClass('active'); }); $('.chevron2').click(function() { $('.more-spelling-grammar').toggleClass('active'); });

 img { width: 10px }.chevron { cursor: pointer; }.chevron.active { transform: rotate(90deg); }.column { display: flex; flex-direction: column; }.more-fix-broken-links { max-width: 280px; display: none; }.more-spelling-grammar { max-width: 280px; display: none; }.more-fix-broken-links.active { display: block; height: 100%; }.more-spelling-grammar.active { display: block; height: 100%; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="column"> <div> <input id="fix-broken-links" type="checkbox"> <label for="fix-broken-links">Fix broken links</label> <img class="chevron1" src="https://supersede.space/chevron.svg" alt="Checklist chevron"> </div> <div> <p class="more-fix-broken-links">SKuska skuskaSKuska skuskaSKuska skuskaSKuska skuskaSKuska skuska</p> </div> </div> <div class="column"> <div> <input id="spelling-grammar" type="checkbox"> <label for="spelling-grammar">Spelling & grammar</label> <img class="chevron2" src="https://supersede.space/chevron.svg" alt="Checklist chevron"> </div> <div> <p class="more-spelling-grammar">SKuska skuskaSKuska skuskaSKuska skuskaSKuska skuskaSKuska skuska</p> </div> </div>

Answer 1

You can store each class and the corresponding paragraph class in a set and get the clicked element class as follows:

 let set = { 'chevron1':'.more-fix-broken-links', 'chevron2':'.more-spelling-grammar' } $('.chevron1, .chevron2').click(function(e) { $(set[e.target.className]).toggleClass('active'); });

 img { width: 10px }.chevron { cursor: pointer; }.chevron.active { transform: rotate(90deg); }.column { display: flex; flex-direction: column; }.more-fix-broken-links { max-width: 280px; display: none; }.more-spelling-grammar { max-width: 280px; display: none; }.more-fix-broken-links.active { display: block; height: 100%; }.more-spelling-grammar.active { display: block; height: 100%; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="column"> <div> <input id="fix-broken-links" type="checkbox"> <label for="fix-broken-links">Fix broken links</label> <img class="chevron1" src="https://supersede.space/chevron.svg" alt="Checklist chevron"> </div> <div> <p class="more-fix-broken-links">SKuska skuskaSKuska skuskaSKuska skuskaSKuska skuskaSKuska skuska</p> </div> </div> <div class="column"> <div> <input id="spelling-grammar" type="checkbox"> <label for="spelling-grammar">Spelling & grammar</label> <img class="chevron2" src="https://supersede.space/chevron.svg" alt="Checklist chevron"> </div> <div> <p class="more-spelling-grammar">SKuska skuskaSKuska skuskaSKuska skuskaSKuska skuskaSKuska skuska</p> </div> </div>

Answer 2

Try to use parent element too, like this. On my example, using 2 .parent() brings you to a .column level, and from that point you start search of tag p using .find('p') . Or you can set a specific class to p element ant search for them.

 $('.chevron').click(function() { $(this).toggleClass('active'); // for you css.chevron.active $(this).parent().parent().find('p').toggleClass('active'); });

 img { width: 10px }.chevron { cursor: pointer; }.chevron.active { transform: rotate(90deg); }.column { display: flex; flex-direction: column; }.more-fix-broken-links { max-width: 280px; display: none; }.more-spelling-grammar { max-width: 280px; display: none; }.more-fix-broken-links.active { display: block; height: 100%; }.more-spelling-grammar.active { display: block; height: 100%; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="column"> <div> <input id="fix-broken-links" type="checkbox"> <label for="fix-broken-links">Fix broken links</label> <img class="chevron" src="https://supersede.space/chevron.svg" alt="Checklist chevron"> </div> <div> <p class="more-fix-broken-links">SKuska skuskaSKuska skuskaSKuska skuskaSKuska skuskaSKuska skuska</p> </div> </div> <div class="column"> <div> <input id="spelling-grammar" type="checkbox"> <label for="spelling-grammar">Spelling & grammar</label> <img class="chevron" src="https://supersede.space/chevron.svg" alt="Checklist chevron"> </div> <div> <p class="more-spelling-grammar">SKuska skuskaSKuska skuskaSKuska skuskaSKuska skuskaSKuska skuska</p> </div> </div>