Sliding panel menu

Question

I've created a sliding panel menu that works (JSFiddle), 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 I can make it more efficient. I'd like any "shown" divs to be hidden and then show the div associated to that link.

HTML

 <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>

JavaScript

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

• George Mauer: A few comments - avoid using ids, prefer using classes that describe the elements to prevent weird conflicts. Also, don't include the element type in the id/classname, there's no point in that. Finally, the more common convention is to separate words with hyphens over underscores.

Answer 1

If you make the href the id of the element you wish to show you can simplify it greatly.

This works since you use the structure of your document to your advantage you know you want to hide all the <div/> child elements under #workDiv regardless of the id and only want to show the <div/> of the <a/> you clicked on. And since the <a/> contains a href that links to the <div/> you want to show you can simply retrive that value and show the correct element.

<html/>

<ul id="gallery">
 <li><a href="#workDiv_retail" class="toggleWidth" >RETAIL</a></li>
 <!-- the others...-->
</ul>

jQuery

$('.toggleWidth').click(function(e) {
 e.preventDefault();
 var id = $(this).attr("href");
 $("#workDiv > div").slideLeft();
 $(id).slideToggleWidth(); 
});

Updated jsfiddle