Identifying clicked elements

Question

I'm relatively new to web development. I started learning JavaScript a few months ago and it's going well. I made this code for someone on fiverr, and it got the job done, but I know there's a more efficient way to write this without using a click handler for each element. There has to be a way to know which element is clicked and show the proper one without a separate click handler for each element.

Here's the Codepen link to the code.

HTML

<div>
 <a href="#" id="item-1">Item 1</a>
 <a href="#" id="item-2">Item 2</a>
 <a href="#" id="item-3">Item 3</a>
 <a href="#" id="item-4">Item 4</a>
</div>
<div class="item-container">
 <div class="item-block" id="1">
 <h1>Item 1</h1>
 <p>This is Item 1 content</p>
 </div>
 <div class="item-block" id="2">
 <h1>Item 2</h1>
 <p>This is item 2 content</p>
 </div>
 <div class="item-block" id="3">
 <h1>Item 3</h1>
 <p>This is item 3 content</p>
 </div>
 <div class="item-block" id="4">
 <h1>Item 4</h1>
 <p>This is item 4 content</p>
 </div>
</div>

CSS

.item-block {
 display: none;
}

JS

$(document).ready(function() {
 $('#1').show();
})
$('#item-1').click(function() {
 $('.item-block').hide();
 $('#1').show();
})
$('#item-2').click(function() {
 $('.item-block').hide();
 $('#2').show();
})
$('#item-3').click(function() {
 $('.item-block').hide();
 $('#3').show();
})
$('#item-4').click(function() {
 $('.item-block').hide();
 $('#4').show();
})

Answer 1

In the HTML, give some id to your div with links, like this:

<div id="links">
 <a href="#" id="item-1">Item 1</a>
 <a href="#" id="item-2">Item 2</a>
 <a href="#" id="item-3">Item 3</a>
 <a href="#" id="item-4">Item 4</a>
</div>

Then change your JavaScript like this:

$("#links > a").click(function(){
 $('.item-block').hide();
 $("#"+this.id.replace("item-","")).show();
})

• Zack Bridges: Thanks! I like the way this one works the best. That id replace function is super handy.

Answer 2

First, improve your HTML so that the links are actually links:

<div class="links">
 <a href="#1">Item 1</a>
 <a href="#2">Item 2</a>
 <a href="#3">Item 3</a>
 <a href="#4">Item 4</a>
</div>
<div class="item-container">
 <div class="item-block" id="1">
 <h1>Item 1</h1>
 <p>This is Item 1 content</p>
 </div>
 <div class="item-block" id="2">
 <h1>Item 2</h1>
 <p>This is item 2 content</p>
 </div>
 <div class="item-block" id="3">
 <h1>Item 3</h1>
 <p>This is item 3 content</p>
 </div>
 <div class="item-block" id="4">
 <h1>Item 4</h1>
 <p>This is item 4 content</p>
 </div>
</div>

Then, simplify the logic:

$('.links').on('click', 'a', function (e) {
 $(this.hash)
 .show()
 .siblings()
 .hide();
});