jQuery on click toggles DIV in a list and only ever show one at a time, and same div on .dblclick() use different toggle?
<p>I have a horizontal list of covers, if you click any of them it will toggle and reveal the back, but only one toggles at a time. But if you double click the front cover it also toggles to reveal a different back.</p>

<p>The first toggle works, with only one being shown at a time.  But the second toggle on <code>dblClick</code> doesn't work.  I'm not sure if I need to write the first toggle better using <code>onClick</code> explicitly or if the second toggle is impossible anyway?</p>

<p>The HTML</p>

<pre><code>    &lt;div id="cover-wrapper"&gt;
      &lt;ul class="covers"&gt;
        &lt;li class="cover" id="remove-cover"&gt;
            &lt;div class="cover-front"&gt;
        &lt;a href="javascript:showonlyone('show-back1');" &gt;
               &lt;img src="images/covers/1.png" /&gt;
            &lt;/a&gt;
            &lt;/div&gt;    
            &lt;div class="cover-back" id="show-back1"&gt;
              &lt;div class="content"&gt;
                 &lt;!-- content here...  --&gt;
              &lt;/div&gt;
            &lt;/div&gt;       
       &lt;/li&gt;
       &lt;li class="cover" id="remove-cover"&gt;
            &lt;div class="cover-front"&gt;
        &lt;a href="javascript:showonlyone('show-back2');" &gt;
               &lt;img src="images/covers/2.png" /&gt;
            &lt;/a&gt;
            &lt;/div&gt;    
            &lt;div class="cover-back" id="show-back2"&gt;
              &lt;div class="content"&gt;
                &lt;!-- content here...  --&gt;
              &lt;/div&gt;
            &lt;/div&gt;       
      &lt;/li&gt;
</code></pre>



<p>Javascript</p>

<pre><code>//Toggle cover on click from front to back &amp; only ever show one toggled from list
function showonlyone(thechosenone) {
  $(".cover-back").each(function(index) {
    if ($(this).attr("id") == thechosenone) {
      $(this).fadeIn(0);
    } else {
      $(this).fadeOut(0);
    }
  }
});

//Toggle cover on dblclick from front to back with different back div 
$(document).ready(function() {
  $("li.cover").dblclick(function() {
    if ($(this).hasClass("cover-back-2")) {
      $(this).toggleClass("cover-back-2", false);
    } else {
      $(this).toggleClass("cover-back-2", true);
    }
  });
})
</code></pre>
