Question

What is the best way to hide all links except for one in javascript? (jquery is okay)

Say I have the following:

<div id="choices"> 
  <div><a href="#">A<></div> 
  <div><a href="#">B</a></div> 
  <div><a href="#">C</a></div> 
</div>

I want to make it such that if a user clicks link A, B, or C, the div’s that do not contain the one that was selected disappear and the choice selected pops up in an alert box. Upon clicking on a reset button, all the divs appear again as normal.

Example: User clicks A, results in B and C divs hiding. User kicks Reset button and all show up again.

How do I accomplish this?

NOTE: I have been assigning IDs to each of the A, B, C divs respectively and made a function where when the user clicks B, it calls a $(divnotclicked).hide() for the ones I want to hide. And for the reset button I just do .show() for each of them $(A).show(), $(b) $.show()(C).show()…. but theres gotta be a way to do with without me assigning IDs to each of them. Im looking for the best way to do it.

Im looking for the best way to do this, preferably without manually calling functions for each of them or assigning IDs to each div within the “choices” div. Or having to call on each individual div to “.show” upon clicking the Reset button.

Answer 1

With jQuery, it’s quite simple:

$('#choices div').click(function() { $(this).siblings().hide(); });
$('#resetButton').click(function() { $('#choices div').show(); });

Also, here is a jsFiddle with this code in action. In general, jsFiddle is an excelent tool when you need to play with jQuery (or other frameworks, for that matter).