Show/hide depending on ID and Class

Question

I have written some code that shows a div class, based on what ID is clicked. I'm a beginner, so not sure how to make this code compact, it seems way too long at the moment. Can anyone suggest a better way to write it please?

$("#Thumb1").on("click", function() {
  $('.v1').show();
  $('.v2').hide();
  $('.v3').hide();
  $('.v4').hide();
  $('.v5').hide();
  $('.v6').hide();
  $('.v7').hide();
  $('.v8').hide();
  $('.v9').hide();
  $('.v10').hide();
  $('.v11').hide();
  $('.v12').hide();
  $('.v13').hide();
  $('.v14').hide();
  $('.v15').hide();
});
$("#Thumb2").on("click", function() {
  $('.v1').hide();
  $('.v2').show();
  $('.v3').hide();
  $('.v4').hide();
  $('.v5').hide();
  $('.v6').hide();
  $('.v7').hide();
  $('.v8').hide();
  $('.v9').hide();
  $('.v10').hide();
  $('.v11').hide();
  $('.v12').hide();
  $('.v13').hide();
  $('.v14').hide();
  $('.v15').hide();
});
$("#Thumb3").on("click", function() {
  $('.v1').hide();
  $('.v2').hide();
  $('.v3').show();
  $('.v4').hide();
  $('.v5').hide();
  $('.v6').hide();
  $('.v7').hide();
  $('.v8').hide();
  $('.v9').hide();
  $('.v10').hide();
  $('.v11').hide();
  $('.v12').hide();
  $('.v13').hide();
  $('.v14').hide();
  $('.v15').hide();
});

$("#Thumb4").on("click", function() {
  $('.v1').hide();
  $('.v2').hide();
  $('.v3').hide();
  $('.v4').show();
  $('.v5').hide();
  $('.v6').hide();
  $('.v7').hide();
  $('.v8').hide();
  $('.v9').hide();
  $('.v10').hide();
  $('.v11').hide();
  $('.v12').hide();
  $('.v13').hide();
  $('.v14').hide();
  $('.v15').hide();
});

$("#Thumb5").on("click", function() {
  $('.v1').hide();
  $('.v2').hide();
  $('.v3').hide();
  $('.v4').hide();
  $('.v5').show();
  $('.v6').hide();
  $('.v7').hide();
  $('.v8').hide();
  $('.v9').hide();
  $('.v10').hide();
  $('.v11').hide();
  $('.v12').hide();
  $('.v13').hide();
  $('.v14').hide();
  $('.v15').hide();
});

$("#Thumb6").on("click", function() {
  $('.v1').hide();
  $('.v2').hide();
  $('.v3').hide();
  $('.v4').hide();
  $('.v5').hide();
  $('.v6').show();
  $('.v7').hide();
  $('.v8').hide();
  $('.v9').hide();
  $('.v10').hide();
  $('.v11').hide();
  $('.v12').hide();
  $('.v13').hide();
  $('.v14').hide();
  $('.v15').hide();
});

$("#Thumb7").on("click", function() {
  $('.v1').hide();
  $('.v2').hide();
  $('.v3').hide();
  $('.v4').hide();
  $('.v5').hide();
  $('.v6').hide();
  $('.v7').show();
  $('.v8').hide();
  $('.v9').hide();
  $('.v10').hide();
  $('.v11').hide();
  $('.v12').hide();
  $('.v13').hide();
  $('.v14').hide();
  $('.v15').hide();
});

$("#Thumb8").on("click", function() {
  $('.v1').hide();
  $('.v2').hide();
  $('.v3').hide();
  $('.v4').hide();
  $('.v5').hide();
  $('.v6').hide();
  $('.v7').hide();
  $('.v8').show();
  $('.v9').hide();
  $('.v10').hide();
  $('.v11').hide();
  $('.v12').hide();
  $('.v13').hide();
  $('.v14').hide();
  $('.v15').hide();
});

$("#Thumb9").on("click", function() {
  $('.v1').hide();
  $('.v2').hide();
  $('.v3').hide();
  $('.v4').hide();
  $('.v5').hide();
  $('.v6').hide();
  $('.v7').hide();
  $('.v8').hide();
  $('.v9').show();
  $('.v10').hide();
  $('.v11').hide();
  $('.v12').hide();
  $('.v13').hide();
  $('.v14').hide();
  $('.v15').hide();
});

$("#Thumb10").on("click", function() {
  $('.v1').hide();
  $('.v2').hide();
  $('.v3').hide();
  $('.v4').hide();
  $('.v5').hide();
  $('.v6').hide();
  $('.v7').hide();
  $('.v8').hide();
  $('.v9').hide();
  $('.v10').show();
  $('.v11').hide();
  $('.v12').hide();
  $('.v13').hide();
  $('.v14').hide();
  $('.v15').hide();
});

$("#Thumb11").on("click", function() {
  $('.v1').hide();
  $('.v2').hide();
  $('.v3').hide();
  $('.v4').hide();
  $('.v5').hide();
  $('.v6').hide();
  $('.v7').hide();
  $('.v8').hide();
  $('.v9').hide();
  $('.v10').hide();
  $('.v11').show();
  $('.v12').hide();
  $('.v13').hide();
  $('.v14').hide();
  $('.v15').hide();
});

$("#Thumb12").on("click", function() {
  $('.v1').hide();
  $('.v2').hide();
  $('.v3').hide();
  $('.v4').hide();
  $('.v5').hide();
  $('.v6').hide();
  $('.v7').hide();
  $('.v8').hide();
  $('.v9').hide();
  $('.v10').hide();
  $('.v11').hide();
  $('.v12').show();
  $('.v13').hide();
  $('.v14').hide();
  $('.v15').hide();
});

$("#Thumb13").on("click", function() {
  $('.v1').hide();
  $('.v2').hide();
  $('.v3').hide();
  $('.v4').hide();
  $('.v5').hide();
  $('.v6').hide();
  $('.v7').hide();
  $('.v8').hide();
  $('.v9').hide();
  $('.v10').hide();
  $('.v11').hide();
  $('.v12').hide();
  $('.v13').show();
  $('.v14').hide();
  $('.v15').hide();
});

$("#Thumb14").on("click", function() {
  $('.v1').hide();
  $('.v2').hide();
  $('.v3').hide();
  $('.v4').hide();
  $('.v5').hide();
  $('.v6').hide();
  $('.v7').hide();
  $('.v8').hide();
  $('.v9').hide();
  $('.v10').hide();
  $('.v11').hide();
  $('.v12').hide();
  $('.v13').hide();
  $('.v14').show();
  $('.v15').hide();
});

$("#Thumb15").on("click", function() {
  $('.v1').hide();
  $('.v2').hide();
  $('.v3').hide();
  $('.v4').hide();
  $('.v5').hide();
  $('.v6').hide();
  $('.v7').hide();
  $('.v8').hide();
  $('.v9').hide();
  $('.v10').hide();
  $('.v11').hide();
  $('.v12').hide();
  $('.v13').hide();
  $('.v14').hide();
  $('.v15').show();
});

Answer 1

We can be a lot shorter easily with a bunch of css selector and js string manipulation and for optimisation purpose we will use JQuery visible selector:

Starts with selector:

/* <a> elements with an href starting with ".org" */
a[href^=".org"] {
  font-style: italic;
}

Substring:

const str = 'Mozilla';

console.log(str.substring(1, 3));
// expected output: "oz"

console.log(str.substring(2));
// expected output: "zilla"

The logic here is to begin with a clear state using CSS to hide everything but the first element.

Then whenever a click is done on a Thumb, we cut the number from it for later. We hide every visible class starting with v then we show the hidden one with the class "v"+id.

const thumb = "Thumb";

$(`[id^=${thumb}]`).on("click", (e) => {
  const id = $(e.target).attr("id").substring(thumb.length);
  $("[class^=v]:visible").hide();
  $(`.v${id}:hidden`).show();
});

[class^=v]:not(:nth-of-type(1)) {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="Thumb1">1</button>
<button id="Thumb2">2</button>
<button id="Thumb3">3</button>

<div class="v1">1</div>
<div class="v2">2</div>
<div class="v3">3</div>

While this should work for you, I recommend to check the HTML radio button component.