Jquery .toggle() with first element open
<p>So I am using .toggle() to open and close a bunch of divs, but I made the first div open on page load. The problem lies where, if a user click on that div to toggle it closed, it takes two clicks, the first click seems to try to toggle it open again. How should I handle this?</p>

<pre><code>$(document).ready(function(){
    $('.content_accrd').css({"height":"0px"});
    $('.content_accrd:eq(0)').css({"height":"100px"});
    $('.paneltop:eq(0)').css({"background-position":"0px -21px"})
$('.paneltop').toggle( function() {
    $(this).css({"background-position":"0px -21px"})
    .siblings('.content_accrd').animate({"height":"100px"}, 200)
}, function() {
$(this).css({"background-position":"0px 0px"})
    .siblings('.content_accrd').animate({"height":"0px"}, 200);

})
})
</code></pre>

<p>markup:</p>

<pre><code> &lt;div id="panel1" class="panel"&gt;
                &lt;h2 class="panel_title"&gt;Capad Clients&lt;/h2&gt;
                &lt;div class="paneltop"&gt;
                &lt;/div&gt;
              &lt;div class="content_accrd"&gt;
              &lt;p&gt;
text
              &lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;

          &lt;div id="panel1" class="panel"&gt;
                &lt;div class="paneltop"&gt;
                &lt;/div&gt;
              &lt;div class="content_accrd"&gt;
              &lt;p&gt;
              text
              &lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;


          &lt;div id="panel1" class="panel"&gt;
                &lt;div class="paneltop"&gt;
                &lt;/div&gt;
              &lt;div class="content_accrd"&gt;
              &lt;p&gt;
text
              &lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
</code></pre>
