I have 9 "service node" divs in my HTML code, each containing a hidden div and a button that triggers the rotation of the button by 45 degrees and reveals the hidden div. The challenge I am facing is that I have been using repetitive functions for each service node div, assigning arbitrary classes to them as clicking one button affects all buttons and hidden divs. To address this issue, I am experimenting with using the 'this' selector for rotating the button and implementing the parent > child selector instead of relying on arbitrary classes. However, I am struggling with the 'servicedescription' selectors for toggleClass since 'this' does not work for the hidden div when the button is clicked. Below is the current code where modifications have only been made 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>