Using switch/case to eliminate a bunch of show/hide

[bigsilk]

Am working on a site that requires replacing data in <div class="foo"> that has <div id="foo_1"> ... <div id="foo_6">, where these divs have different data.So, here's what I've got:

$('#t1').click(function() {		$('#attorney').show();		$('#insurance,#financial,#estate,#trust,#death').hide();	});		$('#t2').click(function() {		$('#insurance').show();		$('#attorney,#financial,#estate,#trust,#death').hide();	});		$('#t3').click(function() {		$('#financial').show();		$('#attorney,#insurance,#estate,#trust,#death').hide();	});	$('#t4').click(function() {		$('#estate').show();		$('#attorney,#insurance,#financial,#trust,#death').hide();	});		$('#t5').click(function() {		$('#trust').show();		$('#attorney,#insurance,#financial,#estate,#death').hide();	});		$('#t6').click(function() {		$('#death').show();		$('#attorney,#insurance,#financial,#estate,#trust').hide();	});

Surely there's an easier way to do this, and I'm pretty sure switch/case is the answer. I just don't know how to write it. I'm learning this stuff on my own and W3schools, while a great resource, doesn't have much in the way of showing how to create switch/case with the click function.

[jeffman]

Switch is NOT the answer. What you want is a single, generic function that gets attached to all your click handlers. The function accepts a reference to a page element as an argument. Like the function you have now, this one has 2 steps, but reversed from the way you have them:1. hide ALL the elements that can be hidden (not just some -- all of them)2. show the element you received a reference to.I don't mess with jQuery, so I don't know exactly how that will look for you. I also can't see the structure of your page, or I would suggest a generic way to associate your clickable item with the element that needs showing.What I mean is, right now it looks like you have an association between an item called "t1" and an item called "attorney". That's pretty random. If your id's were more like "attorney" (for the button) and "attorney_div" (for the thing to be shown), then your statement might look something like this:$("#" + this.id + "_div").show();And one function could handle the whole business. Again, without more context and jQuery knowledge, I can't lay it out for you as well as I could otherwise. Hopefully you can figure out what I mean and adapt it.

[bigsilk]

I got a good solution from someone at stackoverflow.com:

var things = ['attorney', 'insurance', 'financial', 'estate', 'trust', 'death'];	var guide = {t1: 'attorney', t2: 'insurance', t3: 'financial', t4: 'estate', t5: 'trust', t6: 'death'};	$('#t1, #t2, #t3, #t4, #t5, #t6').click(function() {	var clicked = $(this).attr('id');	$.each(things, function(_, thing) {	var $thing = $('#' + thing);	if (guide[clicked] == thing) $thing.show(); else $thing.hide();	});	});

Amazing how one job can be accomplished in so many ways...