0
\$\begingroup\$

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();
});
\$\endgroup\$
1
  • 2
    \$\begingroup\$ Can you share the HTML too? Are you aware of radio button? Does a css solution wolud suit your need? \$\endgroup\$
    – aloisdg
    May 19 at 9:08

1 Answer 1

1
\$\begingroup\$

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.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.