How can I write this more efficiently without repeating myself?

April 21, 2022

I’m learning jQuery and having a blast, but I feel my code is very repetitive and there must be a smarter way to do it and I’m keen to learn how. The idea of the code is to show/hide a div with information when clicking a button. I got 9 buttons that show a piece of information.

I have 9 buttons with an ‘item-content-div’ for each. The code works but I am copy/pasting the code 9 times and changing the button and ítem-#-content’ for each. Is there a method/way to write this better?

    $(".button1").click(function() {
      $(".item-content").removeClass("active");
      $(".item-1-content").addClass("active");
    })

    $(".button2").click(function() {
      $(".item-content").removeClass("active");
      $(".item-2-content").addClass("active");
    })

  $(".button3").click(function() {
      $(".item-content").removeClass("active");
      $(".item-3-content").addClass("active");
    })

   $(".button4").click(function() {
      $(".item-content").removeClass("active");
      $(".item-4-content").addClass("active");
    })

   $(".button5").click(function() {
      $(".item-content").removeClass("active");
      $(".item-5-content").addClass("active");
    })

   $(".button6").click(function() {
      $(".item-content").removeClass("active");
      $(".item-6-content").addClass("active");
    })

   $(".button7").click(function() {
      $(".item-content").removeClass("active");
      $(".item-7-content").addClass("active");
    })

   $(".button8").click(function() {
      $(".item-content").removeClass("active");
      $(".item-8-content").addClass("active");
    })

   $(".button9").click(function() {
      $(".item-content").removeClass("active");
      $(".item-9-content").addClass("active");
    })

Here is the relative DOM, including the data-idx method which works great.

<div class="container">
  <div class="item-container">
    <div class="item-content item-1-content active">
      <h2>Item 1 active</h2>
    </div>
    <div class="item-content item-2-content">
      <h2>Item 2 active</h2>
    </div>
  </div>
  <div class="itembttn" data-idx="1"></div>
  <div class="itembttn" data-idx="2"></div>
  <div class="itembttn" data-idx="3"></div>
  <div class="itembttn" data-idx="4"></div>
  <div class="itembttn" data-idx="5"></div>
  <div class="itembttn" data-idx="6"></div>
  <div class="itembttn" data-idx="7"></div>
  <div class="itembttn" data-idx="8"></div>
  <div class="itembttn" data-idx="9"></div>
</div>

>Solution :

Here is the version using index (starts at 0)

$(".itembttn").on("click", function() {
  $(".item-content").removeClass("active");
  const idx = $(this).index();
  $(`.item-${idx+1}-content`).addClass("active");
})

.active  {color: red}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="item-container">
    <div class="item-content item-1-content active">
      <h2>Item 1 active</h2>
    </div>
    <div class="item-content item-2-content">
      <h2>Item 2 active</h2>
    </div>
  </div>
  <div>
    <div class="itembttn">1</div>
    <div class="itembttn">2</div>
    <div class="itembttn">3</div>
    <div class="itembttn">4</div>
    <div class="itembttn">5</div>
    <div class="itembttn">6</div>
    <div class="itembttn">7</div>
    <div class="itembttn">8</div>
    <div class="itembttn">9</div>
  </div>
</div>