title: multiple show hide toggle with div sliding out
body: <p>I am new to coding and need help with jQuery. I have 2 <code>&lt;div&gt;</code>s (one with an image, the other with a menu list, both 50% width) and I need to be able to click one of the menu options to make a new div (50% width) appear from the right while reducing the other 2 divs width to 25% each. Then clicking on the same menu option to hide the new div and revert back to the original widths. But if I click on another menu option while the new div is visible, I need it to change the content to that specific menu option content.</p>
  
  <p>How can I swap the left-hand <code>&lt;div&gt;</code> out with jQuery?</p>
  
  <p>Here's the HTML I'm working with:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;title&gt;&lt;/title&gt;
       &lt;!-- SCRIPT FILES --&gt;    
      &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
       &lt;script type="text/javascript" src="script.js"&gt;&lt;/script&gt;     
       &lt;!-- CSS STYLESHEETS --&gt;    
      &lt;link rel="stylesheet" href="reset.css" type="text/css" /&gt;
      &lt;link rel="stylesheet" href="main.css" type="text/css" /&gt;    
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="wrapper"&gt;    
          &lt;div id="header"&gt;        
          &lt;/div&gt;&lt;!--header--&gt;        
              &lt;div id="container"&gt;        
                  &lt;div class="box-container"&gt;                
                      &lt;div class="box1"&gt;                    
                          &lt;img src="images/Untitled-1.png" alt="logo"&gt;                    
                      &lt;/div&gt;                    
                      &lt;div class="box2"&gt;                    
                          &lt;div id="nav"&gt;                        
                              &lt;ul&gt;                            
                                  &lt;li&gt;&lt;a&gt;hello!&lt;/a&gt;&lt;/li&gt;                                
                                  &lt;li&gt;&lt;a&gt;ADVERTISING&lt;/a&gt;&lt;/li&gt;                                
                                  &lt;li&gt;&lt;a&gt;DESIGN&lt;/a&gt;&lt;/li&gt;                                
                                  &lt;li&gt;&lt;a&gt;ABOUT&lt;/a&gt;&lt;/li&gt;                                
                                  &lt;li&gt;&lt;a&gt;BLOG&lt;/a&gt;&lt;/li&gt;                                
                                  &lt;li&gt;&lt;a&gt;SHOP&lt;/a&gt;&lt;/li&gt;                                
                              &lt;/ul&gt;                            
                          &lt;/div&gt;&lt;!--nav--&gt;                        
                      &lt;/div&gt;&lt;!--box2--&gt;                    
                      &lt;div class="box3"&gt;                    
                          &lt;div id="ADVERTISING" class="content"&gt;ADVERTISING&lt;/div&gt;                        
                          &lt;div id="DESIGN" class="content"&gt;DESIGN&lt;/div&gt;                        
                          &lt;div id="ABOUT" class="content"&gt;ABOUT&lt;/div&gt;                        
                          &lt;div id="BLOG" class="content"&gt;BLOG&lt;/div&gt;        
                          &lt;div id="SHOP" class="content"&gt;SHOP&lt;/div&gt;                    
                      &lt;/div&gt;                    
                  &lt;/div&gt;&lt;!--box-container--&gt;            
              &lt;/div&gt;&lt;!--container--&gt;        
          &lt;div id="footer"&gt;        
          &lt;/div&gt;&lt;!--footer--&gt;        
      &lt;/div&gt;&lt;!-- wrapper--&gt;        
  &lt;/body&gt;
  &lt;/html&gt;​
  </code></pre>
  
  <p>Here's a working jsFiddle with the styles: <a href="http://jsfiddle.net/YcphY/6/" rel="nofollow">http://jsfiddle.net/YcphY/6/</a></p>