Return to Revisions

I've created a sliding panel menu that works (JSFiddle: http://jsfiddle.net/stephmoreland/3BT7t/), but I can't wrap my head around shortening the jQuery for it. Right now, when you click one of the links on the left, I wanted it to show that link's div and hide the others, which I've done, but I don't understand how to make it more efficient. I'd like any "shown" divs to be hidden and then show the div associated to that link. Any help, particularly an explanation would be great.

 <div id="work">
 <ul id="gallery">
 <li><a href="javascript:;" class="toggleWidth1">RETAIL</a></li>
 <li><a href="javascript:;" class="toggleWidth2">HEALTH CARE</a></li>
 <li><a href="javascript:;" class="toggleWidth3">POWER &amp; INFRASTRUCTURE</a></li>
 <li><a href="javascript:;" class="toggleWidth4">MANUFACTURING</a></li>
 <li><a href="javascript:;" class="toggleWidth5">FOOD &amp; BEVERAGE</a></li>
 <li><a href="javascript:;" class="toggleWidth6">CULTURAL &amp; COMMUNITY</a></li>
 </ul>
 <div id="workDiv">
 <div id="workDiv_retail">
 <h3>RETAIL</h3>
 </div>
 <div id="workDiv_healthcare">
 <h3>HEALTH CARE</h3>
 </div>
 <div id="workDiv_power_infrastructure">
 <h3>POWER &amp; INFRASTRUCTURE</h3>
 </div>
 <div id="workDiv_manufacturing">
 <h3>MANUFACTURING</h3>
 </div>
 <div id="workDiv_food_beverage">
 <h3>FOOD &amp; BEVERAGE</h3>
 </div>
 <div id="workDiv_cultural_community">
 <h3>CULTURAL &amp; COMMUNITY</h3>
 </div>
 </div>
 </div>

​

$('.toggleWidth1').click(function () {
 $('#workDiv_healthcare').slideLeft();
 $('#workDiv_power_infrastructure').slideLeft();
 $('#workDiv_manufacturing').slideLeft();
 $('#workDiv_food_beverage').slideLeft();
 $('#workDiv_cultural_community').slideLeft();
 $('#workDiv_retail').slideToggleWidth();
});
$('.toggleWidth2').click(function () {
 $('#workDiv_retail').slideLeft();
 $('#workDiv_power_infrastructure').slideLeft();
 $('#workDiv_manufacturing').slideLeft();
 $('#workDiv_food_beverage').slideLeft();
 $('#workDiv_cultural_community').slideLeft();
 $('#workDiv_healthcare').slideToggleWidth();
});
$('.toggleWidth3').click(function () {
 $('#workDiv_retail').slideLeft();
 $('#workDiv_healthcare').slideLeft();
 $('#workDiv_manufacturing').slideLeft();
 $('#workDiv_food_beverage').slideLeft();
 $('#workDiv_cultural_community').slideLeft();
 $('#workDiv_power_infrastructure').slideToggleWidth();
});
$('.toggleWidth4').click(function () {
 $('#workDiv_retail').slideLeft();
 $('#workDiv_healthcare').slideLeft();
 $('#workDiv_power_infrastructure').slideLeft();
 $('#workDiv_food_beverage').slideLeft();
 $('#workDiv_cultural_community').slideLeft();
 $('#workDiv_manufacturing').slideToggleWidth();
});
$('.toggleWidth5').click(function () {
 $('#workDiv_retail').slideLeft();
 $('#workDiv_healthcare').slideLeft();
 $('#workDiv_power_infrastructure').slideLeft();
 $('#workDiv_manufacturing').slideLeft();
 $('#workDiv_cultural_community').slideLeft();
 $('#workDiv_food_beverage').slideToggleWidth();
});
$('.toggleWidth6').click(function () {
 $('#workDiv_retail').slideLeft();
 $('#workDiv_healthcare').slideLeft();
 $('#workDiv_power_infrastructure').slideLeft();
 $('#workDiv_manufacturing').slideLeft();
 $('#workDiv_food_beverage').slideLeft();
 $('#workDiv_cultural_community').slideToggleWidth();
});
 
jQuery.fn.extend({
 slideRight: function() {
 return this.each(function() {
 $(this).animate({width: 'show'});
 });
 },
 slideLeft: function() {
 return this.each(function() {
 $(this).animate({width: 'hide'});
 });
 },
 slideToggleWidth: function() {
 return this.each(function() {
 var h = $(this);
 if (h.css('display') == 'none') {
 h.slideRight();
 } else {
 h.slideLeft();
 }
 });
 }
});

​