title: expanding and collapsing menu items
body: <p>I have a menu made of divs containers and when I mouse over the menu item i want to exand the next element that has a class called container the thing I want to know is when they are expand and I go back to the previous div like back two divs I want the others to contract there widths so if three divs are open and i go back to the first div container the last or others in front contract there width to 0 except the next div cos it displays the next menu items how do do this any examples would be appreciated.</p>
  
  <pre><code>&lt;div class="container&gt;
      &lt;div class="menu"&gt;
          &lt;div&gt;Menu Item 1&lt;/div&gt;
          &lt;div&gt;Menu Item 2&lt;/div&gt;
          &lt;div&gt;Menu Item 3&lt;/div&gt;
          &lt;div&gt;Menu Item 4&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="container&gt;
      &lt;div class="menu"&gt;
          &lt;div&gt;Menu Item 5&lt;/div&gt;
          &lt;div&gt;Menu Item 6&lt;/div&gt;
          &lt;div&gt;Menu Item 7&lt;/div&gt;
          &lt;div&gt;Menu Item 8&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="container&gt;
      &lt;div class="menu"&gt;
          &lt;div&gt;Menu Item 9&lt;/div&gt;
          &lt;div&gt;Menu Item 10&lt;/div&gt;
          &lt;div&gt;Menu Item 11&lt;/div&gt;
          &lt;div&gt;Menu Item 12&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  $('.container .menu .menu-item').mousenter(function() {
      $(this).closest('.container').next('.container').css('width' 200);
  });
  </code></pre>