How can I write this more efficiently without repeating myself?-CodePudding

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 >
  <div >
    <div >
      <h2>Item 1 active</h2>
    </div>
    <div >
      <h2>Item 2 active</h2>
    </div>
  </div>
  <div  data-idx="1"></div>
  <div  data-idx="2"></div>
  <div  data-idx="3"></div>
  <div  data-idx="4"></div>
  <div  data-idx="5"></div>
  <div  data-idx="6"></div>
  <div  data-idx="7"></div>
  <div  data-idx="8"></div>
  <div  data-idx="9"></div>
</div>

CodePudding user response：

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 >
  <div >
    <div >
      <h2>Item 1 active</h2>
    </div>
    <div >
      <h2>Item 2 active</h2>
    </div>
  </div>
  <div>
    <div >1</div>
    <div >2</div>
    <div >3</div>
    <div >4</div>
    <div >5</div>
    <div >6</div>
    <div >7</div>
    <div >8</div>
    <div >9</div>
  </div>
</div>