How to consolidate Jquery selectors for duplicate functions?-CodePudding

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>

CodePudding user response：

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.