Show individual content with jquery - simplify code?

Question

In a tab gallery as described here I have added individual title above and content under the expanded images with the following code, which I am sure can be simplified (going with the DRY rule :-) ), right?

The aim is in one sentence: When I click on #column1 show #imgcontent1 and .title1 and hide all the others, and so on for every #column.

$("#column1").click(function(){
    $("#imgcontent1").css("display", "block");
    $("#imgcontent2").css("display", "none");
    $("#imgcontent3").css("display", "none");
    $("#imgcontent4").css("display", "none");
    $("#imgcontent5").css("display", "none");
    $("#imgcontent6").css("display", "none");
    $(".title1").show();
    $(".title2").hide();
    $(".title3").hide();
    $(".title4").hide();
    $(".title5").hide();
    $(".title6").hide();
});
$("#column2").click(function(){
    $("#imgcontent1").css("display", "none");
    $("#imgcontent2").css("display", "block");
    $("#imgcontent3").css("display", "none");
    $("#imgcontent4").css("display", "none");
    $("#imgcontent5").css("display", "none");
    $("#imgcontent6").css("display", "none");
    $(".title1").hide();
    $(".title2").show();
    $(".title3").hide();
    $(".title4").hide();
    $(".title5").hide();
    $(".title6").hide();
});
$("#column3").click(function(){
    $("#imgcontent1").css("display", "none");
    $("#imgcontent2").css("display", "none");
    $("#imgcontent3").css("display", "block");
    $("#imgcontent4").css("display", "none");
    $("#imgcontent5").css("display", "none");
    $("#imgcontent6").css("display", "none");
    $(".title1").hide();
    $(".title2").hide();
    $(".title3").show();
    $(".title4").hide();
    $(".title5").hide();
    $(".title6").hide();
});
$("#column4").click(function(){
    $("#imgcontent1").css("display", "none");
    $("#imgcontent2").css("display", "none");
    $("#imgcontent3").css("display", "none");
    $("#imgcontent4").css("display", "block");
    $("#imgcontent5").css("display", "none");
    $("#imgcontent6").css("display", "none");
    $(".title1").hide();
    $(".title2").hide();
    $(".title3").hide();
    $(".title4").show();
    $(".title5").hide();
    $(".title6").hide();
});
$("#column5").click(function(){
    $("#imgcontent1").css("display", "none");
    $("#imgcontent2").css("display", "none");
    $("#imgcontent3").css("display", "none");
    $("#imgcontent4").css("display", "none");
    $("#imgcontent5").css("display", "block");
    $("#imgcontent6").css("display", "none");
    $(".title1").hide();
    $(".title2").hide();
    $(".title3").hide();
    $(".title4").hide();
    $(".title5").show();
    $(".title6").hide();
});
$("#column6").click(function(){
    $("#imgcontent1").css("display", "none");
    $("#imgcontent2").css("display", "none");
    $("#imgcontent3").css("display", "none");
    $("#imgcontent4").css("display", "none");
    $("#imgcontent5").css("display", "none");
    $("#imgcontent6").css("display", "block");
    $(".title1").hide();
    $(".title2").hide();
    $(".title3").hide();
    $(".title4").hide();
    $(".title5").hide();
    $(".title6").show();
});

Here's the HTML:

<div class="stage" style="display:none;">
  <div id="imgtext">
  <span class="title1"></span>
  <span class="title2"></span>
  <span class="title3"></span>
  <span class="title4"></span>
  <span class="title5"></span>
  <span class="title6"></span>
  </div>
  <span class="closebtn">X</span>
  <img id="expandedImg" />
  <div id="imgcontent1">Content 1</div>
  <div id="imgcontent2">Content 2</div>
  <div id="imgcontent3">Content 3</div>
  <div id="imgcontent4">Content 4</div>
  <div id="imgcontent5">Content 5</div>
  <div id="imgcontent6">Content 6</div>
</div> 
<div id="column1" class="column">
  <img src="train.jpg" alt="train" title="train" />
</div>
<div id="column2" class="column">
  <img src="bike.jpg" alt="bike" title="bike" />
</div>
<div id="column3" class="column">
  <img src="cake" alt="cake" title="cake" />
</div>
<div id="column4" class="column">
  <img src="mask.jpg" alt="mask" title="mask" />
</div>
<div id="column5" class="column">
  <img src="clown" alt="Clown" title="Clown" />
</div>
<div id="column6" class="column">
  <img src="ski.jpg" alt="ski" title="ski" />
</div>

(Note: The titles are being fetched from the images alt attributes using jquery as well)

I am sure my code is way too circumstantial, but it worked as it should so far. :-)

Thanks for help and ideas!

Answer 1

Use shared classes instead of IDs or numerically indexed attributes, and use the clicked column index to determine which imgcontent and title to show. Eg

<span class="title"></span>
<span class="title"></span>

<div class="imgcontent">Content 1</div>
<div class="imgcontent">Content 2</div>

And then you'll be able to do:

const columns = $('.column');
const contents = $('.imgcontent');
const titles = $('.title');

columns.each((i, div) => {
  $(div).click(() => {
    contents.hide();
    titles.hide();
    $(contents[i]).show();
    $(titles[i]).show();
  });
});