2
\$\begingroup\$

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();
})
\$\endgroup\$

migrated from stackoverflow.com Mar 26 '15 at 15:54

This question came from our site for professional and enthusiast programmers.

3
\$\begingroup\$

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();
})
\$\endgroup\$
  • 1
    \$\begingroup\$ Thanks! I like the way this one works the best. That id replace function is super handy. \$\endgroup\$ – Zack Bridges Mar 30 '15 at 21:15
3
\$\begingroup\$

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();
});
\$\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.