jQuery code to add / remove classes depending on the button clicked

Question

What the code does

What the JQuery code does is add / remove classes on div's elsewhere on the page, depending on the button clicked.

Button 1 clicked → add class showModule to divs with class Module1 (remove showModule class from all other divs)

Button 2 clicked → add class showModule to divs with class Module2 (remove showmodule from all other divs)

However, there are tons of redundancies? How can I make this much more concise?

Code below the longer explanation

---

CSS to make sections appear or dissappear:

.x-section.hideModule {
 visibility: hidden;
 opacity: 0;
 max-height: 0;
 padding:0;
 transition: opacity .8s ease;
}
.x-section.showModule {
 visibility: visible;
 opacity: 1;
 max-height: 100%;
 transition: opacity .8s ease;
}

These classes get added or removed based on clicking behaviour.

When someone clicks the button for 'module 1' the button itself gets a class added, but relevant div further down the page get the class showModule added, and the class hideModule is removed. In addition other div's have the class showModule removed and the class hideModule added. Thus, only the relevant content is visible to the user.

can the code below be recoded / simplified for less redundancies

So my JQuery code to achieve this works beautifully, but this code has so much redundancy in it... There must be a much smarter way to achieve this? Please be kind... absolute coding newbie here.

jQuery(document).ready(function ($) {
 $(function () {
 // when button 1 is clicked, set button 1 to active,
 // others to not active
 $(".module1Btn").click(function () {
 $(".module1Btn").addClass("moduleBtnActive")
 $(".module2Btn").removeClass("moduleBtnActive")
 $(".module3Btn").removeClass("moduleBtnActive")
 // and show module 1, hide others
 $(".module1").addClass("showModule")
 $(".module2").addClass("hideModule")
 $(".module3").addClass("hideModule")
 $(".module1").removeClass("hideModule")
 $(".module2").removeClass("showModule")
 $(".module3").removeClass("showModule")
 })
 // when button 2 is clicked, set button 2 to active,
 // others to not active
 $(".module2Btn").click(function () {
 $(".module2Btn").addClass("moduleBtnActive")
 $(".module1Btn").removeClass("moduleBtnActive")
 $(".module3Btn").removeClass("moduleBtnActive")
 // and show module 2, hide others
 $(".module2").addClass("showModule")
 $(".module1").addClass("hideModule")
 $(".module3").addClass("hideModule")
 $(".module2").removeClass("hideModule")
 $(".module1").removeClass("showModule")
 $(".module3").removeClass("showModule")
 })
 $(".module3Btn").click(function () {
 // when button 3 is clicked, set button 3 to active,
 // others to not active
 $(".module3Btn").addClass("moduleBtnActive")
 $(".module1Btn").removeClass("moduleBtnActive")
 $(".module2Btn").removeClass("moduleBtnActive")
 // and show module 3, hide others
 $(".module3").addClass("showModule")
 $(".module2").addClass("hideModule")
 $(".module1").addClass("hideModule")
 $(".module3").removeClass("hideModule")
 $(".module2").removeClass("showModule")
 $(".module1").removeClass("showModule")
 })
 })
})

• 200_success: There seems to be a lot of redundancy in your request to remove redundancies. 😜

Answer 1

You added classes to mark the differences, all you need to do is add classes that mark the commonalities as well.

<div class="module-btn" data-visibile-class="module-1" />
<div class="module-btn" data-visibile-class="module-2" />
<div class="module-btn" data-visibile-class="module-3" />
<div class="module-content module-1" />
<div class="module-content module-2" />
<div class="module-content module-3" />

$('.module-btn').click(() => {
 $('.module-btn.active').removeClass('active')
 const clickedButton = $(this)
 clickedButton.addClass('active')
 const visibleClass = clickedButton.attr('data-visible-class')
 $('.module-content:not(.' + visibleClass + ')').addClass('hide').removeClass('show')
 $('.module-content.' + visibleClass).addClass('show').removeClass('hide')
})

Not tested at all, but hopefully you get the idea...