Using 'nth' selectors in jQuery to target specific classes

Question

I'm still learning jQuery, and am unable to work out how to cleanly use 'nth' selectors to target the classes I want - even after looking at 'similar' threads, as I do not understand some of the code.

My Goals:

• That a specific 'Primary Filter' button will target a specific set of 'Secondary Filters'.
• When a set of 'Secondary filters' are active and another 'Primary Filter' button is clicked, it will hide the previously displayed Secondary Filters.
• I'm also not sure why the transition isn't working but.. not important.

Please see my jsFiddle here: https://jsfiddle.net/0azykcto/4/

For the website I am creating, there is potential that the person is going to add additional 'primary filter' buttons occasionally, along with a set of 'secondary filters' to go with them.

$(document).ready(function(){
  $("#primary-filters .btn:nth-child(1)").click(function(){
    $('.secondary-filters:nth-child(2)').toggleClass("height");
  });
  $("#primary-filters .btn:nth-child(2)").click(function(){
    $('.secondary-filters:nth-child(3)').toggleClass("height");
  });
  $("#primary-filters .btn:nth-child(3)").click(function(){
    $('.secondary-filters:nth-child(4)').toggleClass("height");
  });
});

I was hoping there might be an easy way to loop this process perhaps. If anyone is able to point me in the rough direction of what I'm missing/how I might achieve this, that would be much appreciated.

Answer 1

You can rely on indexes to make this easier and also use show/hide like below

 $(document).ready(function() { var sel = "#primary-filters .btn"; $(sel).click(function() { var i = $(sel).index(this); $('.secondary-filters').hide(); /*Hide all*/ $('.secondary-filters').eq(i).show(); /*show the needed one*/ }); }); 

 #primary-filters .btn:nth-child(1) { background: #dd6565; } #primary-filters .btn:nth-child(2) { background: #6587dd; } #primary-filters .btn:nth-child(3) { background: #65dd6e; } .secondary-filters { background: #F1F1F1; overflow: hidden; display:none; } .secondary-filters:nth-child(2) .btn { background: red; } .secondary-filters:nth-child(3) .btn { background: blue; } .secondary-filters:nth-child(4) .btn { background: green; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="filter-container"> <div id="primary-filters"> <button class="btn">Filter One</button> <button class="btn">Filter Two</button> <button class="btn">Filter Three</button> </div> <div class="secondary-filters"> <button class="btn">Button One</button> <button class="btn">Button Two</button> </div> <div class="secondary-filters"> <button class="btn">Button One</button> <button class="btn">Button Two</button> </div> <div class="secondary-filters"> <button class="btn">Button One</button> <button class="btn">Button Two</button> </div> </div> 

Or fade functions:

 $(document).ready(function() { var sel = "#primary-filters .btn"; $(sel).click(function() { var i = $(sel).index(this); $('.secondary-filters').hide(); $('.secondary-filters').eq(i).fadeIn(); }); }); 

 #primary-filters .btn:nth-child(1) { background: #dd6565; } #primary-filters .btn:nth-child(2) { background: #6587dd; } #primary-filters .btn:nth-child(3) { background: #65dd6e; } .secondary-filters { background: #F1F1F1; overflow: hidden; display:none; } .secondary-filters:nth-child(2) .btn { background: red; } .secondary-filters:nth-child(3) .btn { background: blue; } .secondary-filters:nth-child(4) .btn { background: green; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="filter-container"> <div id="primary-filters"> <button class="btn">Filter One</button> <button class="btn">Filter Two</button> <button class="btn">Filter Three</button> </div> <div class="secondary-filters"> <button class="btn">Button One</button> <button class="btn">Button Two</button> </div> <div class="secondary-filters"> <button class="btn">Button One</button> <button class="btn">Button Two</button> </div> <div class="secondary-filters"> <button class="btn">Button One</button> <button class="btn">Button Two</button> </div> </div>