On active class heading color change ( add / remove class)

Question

I'm working on accordion here I have two content div blocks I got the output but the problem is my code is not in standard form and lines of code is more. I want to make it short and simple way just using add/remove class. And I want to change the active tab heading color. Can anyone point me in the right direction.

 $(".benefits-slide1").click(function() { if ($(".benefits-slideDiv1").hasClass("noDisplay")) { $(".benefits-slideDiv1").removeClass("noDisplay").show("slideDown"); $(".benefits-slideDiv2, .benefits-slideDiv3, .benefits-slideDiv4").addClass("noDisplay").hide("slideDown"); } }); $(".benefits-slide2").click(function() { if ($(".benefits-slideDiv2").hasClass("noDisplay")) { $(".benefits-slideDiv2").removeClass("noDisplay").show("slideDown"); $(".benefits-slideDiv1, .benefits-slideDiv3, .benefits-slideDiv4").addClass("noDisplay").hide("slideDown"); } }); $(".benefits-slide3").click(function() { if ($(".benefits-slideDiv3").hasClass("noDisplay")) { $(".benefits-slideDiv3").removeClass("noDisplay").show("slideDown"); $(".benefits-slideDiv1, .benefits-slideDiv2, .benefits-slideDiv4").addClass("noDisplay").hide("slideDown"); } }); $(".benefits-slide4").click(function() { if ($(".benefits-slideDiv4").hasClass("noDisplay")) { $(".benefits-slideDiv4").removeClass("noDisplay").show("slideDown"); $(".benefits-slideDiv1, .benefits-slideDiv2, .benefits-slideDiv3").addClass("noDisplay").hide("slideDown"); } }); 

 .slideDiv1 { background-color: red; } .slideDiv2 { background-color: blue; } .slideDiv3 { background-color: green; } .slideDiv4 { background-color: pink; } .noDisplay { display: none; } div#accordionExample { display: flex; flex-direction: column; } .benefits-wrap { background: #ccc; height: 100px; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <div class="accordion nav" id="accordionExample" id="myTab" role="tablist"> <div class="benefits-acc"> <button class="benefits d-flex benefits-slide1"> <h3 class="pl-3">Personalized health journey</h3> </button> <div class="card-body benefits-slideDiv1"> <p>content 1</p> </div> </div> </div> <div class="benefits-acc"> <button class="benefits d-flex benefits-slide2"> <h3 class="pl-3">Personalized health journey</h3> </button> <div class="card-body benefits-slideDiv2 noDisplay"> <p>content 2</p> </div> </div> <div class="benefits-acc"> <button class="benefits d-flex benefits-slide3"> <h3 class="pl-3">Personalized health journey</h3> </button> <div class="card-body benefits-slideDiv3 noDisplay"> <p>content 3</p> </div> </div> <div class="benefits-acc"> <button class="benefits d-flex benefits-slide4"> <h3 class="pl-3">Personalized health journey</h3> </button> <div class="card-body benefits-slideDiv4 noDisplay"> <p>content 4</p> </div> </div> </div> <div class="benefits-wrap"> <h3>Second content block</h3> <div class="benefits-slideDiv1"> Second content 1</div> <div class="benefits-slideDiv2 noDisplay">Second content 2</div> <div class="benefits-slideDiv3 noDisplay">Second content 3</div> <div class="benefits-slideDiv4 noDisplay">Second content 4</div> </div> 

Answer 1

This is an example (not perfect) of what you've tried to do, note that I've used HTML5 data-* attribute in each button to store the className of the associated div 's.

 $(".benefits").click(function() { let otherButtons = $(".benefits").not($(this)); otherButtons.siblings(".card-body").addClass("noDisplay"); otherButtons.parent().removeClass("active"); $(this).parent().addClass("active"); $('.benefits-wrap').children('div').addClass("noDisplay"); let divClass = $(this).data('div'); $(`.${divClass}`).toggleClass("noDisplay"); }); 

 .benefits-slideDiv1 { background-color: red; } .benefits-slideDiv2 { background-color: blue; } .benefits-slideDiv3 { background-color: green; } .benefits-slideDiv4 { background-color: pink; } .noDisplay { display: none; } div#accordionExample { display: flex; flex-direction: column; } .benefits-wrap { background: #ccc; height: 100px; } .benefits-acc.active { background-color: lightblue; } .benefits-acc.active h3 { color: green; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <div class="accordion nav" id="accordionExample" id="myTab" role="tablist"> <div class="benefits-acc active"> <button class="benefits d-flex benefits-slide1" data-div="benefits-slideDiv1"> <h3 class="pl-3">Personalized health journey</h3> </button> <div class="card-body benefits-slideDiv1"> <p>content 1</p> </div> </div> </div> <div class="benefits-acc"> <button class="benefits d-flex benefits-slide2" data-div="benefits-slideDiv2"> <h3 class="pl-3">Personalized health journey</h3> </button> <div class="card-body benefits-slideDiv2 noDisplay"> <p>content 2</p> </div> </div> <div class="benefits-acc"> <button class="benefits d-flex benefits-slide3" data-div="benefits-slideDiv3"> <h3 class="pl-3">Personalized health journey</h3> </button> <div class="card-body benefits-slideDiv3 noDisplay"> <p>content 3</p> </div> </div> <div class="benefits-acc"> <button class="benefits d-flex benefits-slide4" data-div="benefits-slideDiv4"> <h3 class="pl-3">Personalized health journey</h3> </button> <div class="card-body benefits-slideDiv4 noDisplay"> <p>content 4</p> </div> </div> </div> <div class="benefits-wrap"> <h3>Second content block</h3> <div class="benefits-slideDiv1"> Second content 1</div> <div class="benefits-slideDiv2 noDisplay">Second content 2</div> <div class="benefits-slideDiv3 noDisplay">Second content 3</div> <div class="benefits-slideDiv4 noDisplay">Second content 4</div> </div>