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.

​

​

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

JavaScript

 <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"><span class="gallery_img"><a title="You can add caption to pictures." href="images/work/bluewater_bridge/besterd_bluewater1.jpg" rel="prettyPhoto[pp_gal6]"><img src="images/work/bluewater_bridge/besterd_bluewater1_thumb.jpg" /></a></span><span class="gallery_img_hide"><a title="You can add caption to pictures." href="images/work/bluewater_bridge/besterd_bluewater3.jpg" rel="prettyPhoto[pp_gal6]"><img src="images/work/bluewater_bridge/besterd_bluewater3_thumb.jpg" /></a></span><span class="gallery_img_hide"><a title="You can add caption to pictures." href="images/work/bluewater_bridge/besterd_bluewater4.jpg" rel="prettyPhoto[pp_gal6]"><img src="images/work/bluewater_bridge/besterd_bluewater4_thumb.jpg" /></a></span><span class="gallery_img_hide"><a title="You can add caption to pictures." href="images/work/bluewater_bridge/besterd_bluewater5.jpg" rel="prettyPhoto[pp_gal6]"><img src="images/work/bluewater_bridge/besterd_bluewater5_thumb.jpg" /></a></span><span class="gallery_img_hide"><a title="You can add caption to pictures." href="images/work/bluewater_bridge/besterd_bluewater6.jpg" rel="prettyPhoto[pp_gal6]"><img src="images/work/bluewater_bridge/besterd_bluewater6_thumb.jpg" /></a></span><span class="gallery_img_hide"><a title="You can add caption to pictures." href="images/work/bluewater_bridge/besterd_bluewater7.jpg" rel="prettyPhoto[pp_gal6]"><img src="images/work/bluewater_bridge/besterd_bluewater7_thumb.jpg" /></a></span>
 <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>

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