Better way to write this jQuery code consisting of many links and open/closing divs

Question

I have 12 links and they each change which div is showing on the right side. I feel I am very inefficient in doing so with multiple click and hide statements.

 $(document).ready(function() { /*PSEUDO CODE*/ /*LINK CLICKED ON OPENS CORRESPONDING DIV INSIDE DYNAMIC DIV*/ }); 

 .box { border: 0.1em solid #000; margin: 1em; width: 70%; } .box a { padding: 2.5em; } 

 <div class="box"> <a href="#" id="link-one">Hello</a> <a href="#" id="link-two">Hello</a> <a href="#" id="link-three">Hello</a> </div> <div class="box"> <a href="#" id="link-four">Hello</a> <a href="#" id="link-five">Hello</a> <a href="#" id="link-six">Hello</a> </div> <div class="box"> <a href="#" id="link-seven">Hello</a> <a href="#" id="link-eight">Hello</a> <a href="#" id="link-nine">Hello</a> </div> <div class="box"> <a href="#" id="link-ten">Hello</a> <a href="#" id="link-eleven">Hello</a> <a href="#" id="link-twelve">Hello</a> </div> <div class="dynamic-div"> <div class="link-box" id="link-one-box"> </div> <div class="link-box" id="link-two-box"> </div> <div class="link-box" id="link-three-box"> </div> <div class="link-box" id="link-four-box"> </div> <div class="link-box" id="link-five-box"> </div> <div class="link-box" id="link-six-box"> </div> <div class="link-box" id="link-seven-box"> </div> <div class="link-box" id="link-eight-box"> </div> <div class="link-box" id="link-nine-box"> </div> <div class="link-box" id="link-ten-box"> </div> <div class="link-box" id="link-eleven-box"> </div> <div class="link-box" id="link-twelve-box"> </div> </div> 

My current JavaScript has every div hidden initially and then when a link is clicked it manually tells every other div to close but keep the one that was clicked open. This seems very inefficient and if someone could give me some pointers on how to make it less verbose I would appreciate it.

Answer 1

Something like this?

$("a[id^=link]").click(function(){
    $(".link-box").hide();
    $("#"+this.id+"-box").show();
})

1. Checks if any <a> with id starting with link is clicked

2. Hides all the boxes

3. Opens the box which id is the id of the clicked link + -box

Demo:

 $("a[id^=link]").click(function(){ $(".link-box").hide(); $("#"+this.id+"-box").show(); }) 

 .link-box{ display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="box"> <a href="#" id="link-one">Hello</a> <a href="#" id="link-two">Hello</a> <a href="#" id="link-three">Hello</a> </div> <div class="box"> <a href="#" id="link-four">Hello</a> <a href="#" id="link-five">Hello</a> <a href="#" id="link-six">Hello</a> </div> <div class="box"> <a href="#" id="link-seven">Hello</a> <a href="#" id="link-eight">Hello</a> <a href="#" id="link-nine">Hello</a> </div> <div class="box"> <a href="#" id="link-ten">Hello</a> <a href="#" id="link-eleven">Hello</a> <a href="#" id="link-twelve">Hello</a> </div> <div class="dynamic-div"> <div class="link-box" id="link-one-box">1 </div> <div class="link-box" id="link-two-box">2 </div> <div class="link-box" id="link-three-box">3 </div> <div class="link-box" id="link-four-box">4 </div> <div class="link-box" id="link-five-box">5 </div> <div class="link-box" id="link-six-box">6 </div> <div class="link-box" id="link-seven-box">7 </div> <div class="link-box" id="link-eight-box">8 </div> <div class="link-box" id="link-nine-box">9 </div> <div class="link-box" id="link-ten-box">10 </div> <div class="link-box" id="link-eleven-box">11 </div> <div class="link-box" id="link-twelve-box">12 </div> </div> 

Answer 2

 $(document).ready(function() { /*PSEUDO CODE*/ /*LINK CLICKED ON OPENS CORRESPONDING DIV INSIDE DYNAMIC DIV*/ $('.box > a').click(function(){ var point = $(this).attr('id'); $('.dynamic-div > div').hide(); $('.dynamic-div > #'+point+'-box').show(); }); }); 

 <!-- begin snippet: js hide: false --> 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="box"> <a href="#" id="link-one">Hello</a> <a href="#" id="link-two">Hello</a> <a href="#" id="link-three">Hello</a> </div> <div class="box"> <a href="#" id="link-four">Hello</a> <a href="#" id="link-five">Hello</a> <a href="#" id="link-six">Hello</a> </div> <div class="box"> <a href="#" id="link-seven">Hello</a> <a href="#" id="link-eight">Hello</a> <a href="#" id="link-nine">Hello</a> </div> <div class="box"> <a href="#" id="link-ten">Hello</a> <a href="#" id="link-eleven">Hello</a> <a href="#" id="link-twelve">Hello</a> </div> <div class="dynamic-div"> <div class="link-box" id="link-one-box">1 </div> <div class="link-box" id="link-two-box">2 </div> <div class="link-box" id="link-three-box">3 </div> <div class="link-box" id="link-four-box">4 </div> <div class="link-box" id="link-five-box">5 </div> <div class="link-box" id="link-six-box">6 </div> <div class="link-box" id="link-seven-box">7 </div> <div class="link-box" id="link-eight-box">8 </div> <div class="link-box" id="link-nine-box">9 </div> <div class="link-box" id="link-ten-box">10 </div> <div class="link-box" id="link-eleven-box">11 </div> <div class="link-box" id="link-twelve-box">12 </div> </div> 

<div class="box">
  <a href="#" id="link-one">Hello</a>
  <a href="#" id="link-two">Hello</a>
  <a href="#" id="link-three">Hello</a>
</div>
<div class="box">
  <a href="#" id="link-four">Hello</a>
  <a href="#" id="link-five">Hello</a>
  <a href="#" id="link-six">Hello</a>
</div>
<div class="box">
  <a href="#" id="link-seven">Hello</a>
  <a href="#" id="link-eight">Hello</a>
  <a href="#" id="link-nine">Hello</a>
</div>
<div class="box">
  <a href="#" id="link-ten">Hello</a>
  <a href="#" id="link-eleven">Hello</a>
  <a href="#" id="link-twelve">Hello</a>
</div>

<div class="dynamic-div">
  <div class="link-box" id="link-one-box">1
  </div>
  <div class="link-box" id="link-two-box">2
  </div>
  <div class="link-box" id="link-three-box">3
  </div>
  <div class="link-box" id="link-four-box">4
  </div>
  <div class="link-box" id="link-five-box">5
  </div>
  <div class="link-box" id="link-six-box">6
  </div>
  <div class="link-box" id="link-seven-box">7
  </div>
  <div class="link-box" id="link-eight-box">8
  </div>
  <div class="link-box" id="link-nine-box">9
  </div>
  <div class="link-box" id="link-ten-box">10
  </div>
  <div class="link-box" id="link-eleven-box">11
  </div>
  <div class="link-box" id="link-twelve-box">12
  </div>
</div>