title: Horizontal Accordion -- trying to use .toggle and .animate
body: <p>Forgive me if this is an inelegant way of going about this but I'm still learning jQuery and am following a path of thought here...</p>
  
  <p>So I started trying to build a horizontal accordion using .toggle and .animate.  Technically, it works...but with one annoying flaw. Here's the scenario:</p>
  
  <p>If I click a box to expand it, then collapse it by clicking another box, that first box I expanded will then require two clicks to expand again.  </p>
  
  <p>For example:</p>
  
  <ol>
  <li>click box1 to expand it</li>
  <li>click box2 to expand box2 while collapsing box1</li>
  <li>box1 will now require two clicks to expand again</li>
  </ol>
  
  <p>Here's the jsfiddle:  <a href="http://jsfiddle.net/banjodrill/rEPnq/10/" rel="nofollow">http://jsfiddle.net/banjodrill/rEPnq/10/</a></p>
  
  <p>I'm assuming there's some fundamental flaw in the way I'm approaching this.  If anyone has time, I would be grateful if you could take a look and help me understand what I'm doing wrong.</p>
  
  <p>Is it related to the fact that I'm using if statements in the toggle functions?</p>
  
  <p>Thanks very much</p>