How to consolidate Jquery selectors for duplicate functions?

Question

I have 9 "service node" divs in my HTML code, each with an hidden div and a button that can be clicked. When the button is clicked, it rotates 45 degrees and causes the hidden div to pop out. The problem is that so far I have only been able to do this by repeating the same function for each service node div while giving it an arbitrary class, because otherwise ALL the buttons and divs move when I click just one of them. I've been attempting to clean this up by using the "this" selector for the button rotate, and using the parent > child selector instead of an arbitrary class for each button. The issue I am wrestling with is the "servicedescription" selectors for toggleClass, which doesn't work with "this" because the element I am clicking is the button, not the hidden div. Below is the current code, the changes I've made so far are only applied to the first servicenode function.

$(".servicenode > Button").click(function(){
    $(".servicedescription1").toggleClass('servicedescriptionhide servicedescriptionshow');
    $("this").toggleClass('buttonrotate');
  });
   
  $(".button2").click(function(){
    $(".servicedescription2").toggleClass('servicedescriptionhide servicedescriptionshow');
    $(".button2").toggleClass('buttonrotate');
  });
  
  $(".button3").click(function(){
    $(".servicedescription3").toggleClass('servicedescriptionhide servicedescriptionshow');
    $(".button3").toggleClass('buttonrotate');
  });
  
  $(".button4").click(function(){
    $(".servicedescription4").toggleClass('servicedescriptionhide servicedescriptionshow');
    $(".button4").toggleClass('buttonrotate');
  });
  
  $(".button5").click(function(){
    $(".servicedescription5").toggleClass('servicedescriptionhide servicedescriptionshow');
    $(".button5").toggleClass('buttonrotate');
  });
  
  $(".button6").click(function(){
    $(".servicedescription6").toggleClass('servicedescriptionhide servicedescriptionshow');
    $(".button6").toggleClass('buttonrotate');
  });
  
  $(".button7").click(function(){
    $(".servicedescription7").toggleClass('servicedescriptionhide servicedescriptionshow');
    $(".button7").toggleClass('buttonrotate');
  });
  
  $(".button8").click(function(){
    $(".servicedescription8").toggleClass('servicedescriptionhide servicedescriptionshow');
    $(".button8").toggleClass('buttonrotate');
  });
  
  $(".button9").click(function(){
    $(".servicedescription9").toggleClass('servicedescriptionhide servicedescriptionshow');
    $(".button9").toggleClass('buttonrotate');
  });

<div class="services">
 
  
  <div class="servicenode"><button class="button1" type="button">></button><p class="servicetitle">Tree Removal</p><p class="servicedescription1 servicedescriptionhide">From big to small, we have the tools and expertise for all your needs</p>
  <img class="a beforetoggle" src = "images/beforeafter/treeremovalflip_300x400.jpg">
  </div>
  
  <div class="servicenode"><button class="button2" type="button">></button><p class="servicetitle">Tree Trimming</p><p class="servicedescription2 servicedescriptionhide">From big to small, we have the tools and expertise for all your needs</p>
  <img class="b beforetoggle" src = "images/beforeafter/treetrimmingflip_300x400.jpg">
  </div>
  
  <div class="servicenode"><button class="button3" type="button">></button><p class="servicetitle">Stump Grinding</p><p class="servicedescription3 servicedescriptionhide">From big to small, we have the tools and expertise for all your needs</p>
  <img class="c beforetoggle" src = "images/beforeafter/stumpgrindingflip_300x400.jpg">
  </div>
  
  <div class="servicenode"><button class="button4" type="button">></button><p class="servicetitle">Hedge Trimming</p><p class="servicedescription4 servicedescriptionhide">From big to small, we have the tools and expertise for all your needs</p>
  <img class="d beforetoggle" src = "images/beforeafter/hedgetrimmingflip300x400.jpg">
  </div>
  
  <div class="servicenode"><button class="button5" type="button">></button><p class="servicetitle">Fruit Tree Pruning</p><p class="servicedescription5 servicedescriptionhide">From big to small, we have the tools and expertise for all your needs</p>
  <img class="e beforetoggle" src = "images/beforeafter/fruittreeflip_300x400.jpg">
  </div>
  
  <div class="servicenode"><button class="button6" type="button">></button><p class="servicetitle">Wood & Brush Removal</p><p class="servicedescription6 servicedescriptionhide">From big to small, we have the tools and expertise for all your needs</p>
  <img class="f beforetoggle" src = "images/beforeafter/treeremovalflip300x400.png">
  </div>
  
  <div class="servicenode"><button class="button7" type="button">></button><p class="servicetitle">Lot Clearing</p><p class="servicedescription7 servicedescriptionhide">From big to small, we have the tools and expertise for all your needs</p>
  <img class="g beforetoggle" src = "images/beforeafter/lotclearingflip300x400.jpg">
  </div>
  
  <div class="servicenode"><button class="button8" type="button">></button><p class="servicetitle">Cabling & Bracing</p><p class="servicedescription8 servicedescriptionhide">From big to small, we have the tools and expertise for all your needs</p>
  <img class="h beforetoggle" src = "images/beforeafter/cablingbracingflip_300x400.jpg">
  </div>
  
  <div class="servicenode"><button class="button9" type="button">></button><p class="servicetitle">Storm Damage</p><p class="servicedescription9 servicedescriptionhide">From big to small, we have the tools and expertise for all your needs</p>
  <img class="i beforetoggle" src = "images/beforeafter/stormdamageflip_300x400.jpg">
  </div>
 
 </div>

CertainPerformance · Accepted Answer · 2021-09-13 23:31:45Z

2

If all of the buttons have a common class, select that class and add a click listener that utilizes this (the element the listener was attached to) to dynamically navigate to its sibling element.

With this HTML:

<div class="servicenode">
  <button class="mybutton" type="button">></button>
  <p class="servicetitle">Tree Removal</p>
  <p class="servicedescription servicedescriptionhide">From big to small, we have the tools and expertise for all your needs</p>
  <img class="a beforetoggle" src="images/beforeafter/treeremovalflip_300x400.jpg">
</div>

you can do

$(.mybutton').click(function() {
  $(this)
    .siblings('.servicedescription')
    .toggleClass('servicedescriptionhide servicedescriptionshow');
  $(this).toggleClass('buttonrotate');
});

for all such .servicenodes.

I'd recommend against having both servicedescriptionhide servicedescriptionshow - instead, have only one of those classes, eg:

.servicedescription {
  /* properties for servicedescriptionshow */
}
.servicedescription.hide {
  /* properties for servicedescriptionhide */
}

which will make your JS easier, and will make both the HTML and JS less repetitive.

answered Sep 13, 2021 at 23:31

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Toph Hughes Over a year ago

This is exactly what I needed. I had no idea about .siblings and would never have figured it out without another 5 hours on Google. Thanks so much! Also, I never WANTED both the hide and show classes, I was just doing a complicated workaround to make it work and now I don't need both classes!

Collectives™ on Stack Overflow

How to consolidate Jquery selectors for duplicate functions?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related