title: slideToggle and toggleClass working together?
body: <p>You can see my current code here <a href="http://jsfiddle.net/Km3vf/6/" rel="nofollow">http://jsfiddle.net/Km3vf/6/</a>.</p>
  
  <p>I want to click on the button, have the class applied to the div, delay, then open the panel. On a second click, it should remove the class and slide the panel back up.</p>
  
  <p>When I click on the button again, it removes the class (perfect) but does not toggle the slide. Can anyone help me please?</p>
  
  <pre><code>&lt;html&gt;
  &lt;div class="third"&gt;
  
      &lt;h2 class="toggle"&gt;CLICK&lt;/h2&gt;
  
      &lt;div id="panel"&gt;
          &lt;p&gt;Panel details go here.&lt;/p&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;/html&gt;
  
  &lt;style&gt;
  .third {
      width:33.3%;
      float:left;
      text-align:center;
      -webkit-transition: all ease 1s;
      -moz-transition: all ease 1s;
      -o-transition: all ease 1s;
      transition: all ease 1s;
  }
  .full {
      width:100%;
      -webkit-transition: all ease 1s;
      -moz-transition: all ease 1s;
      -o-transition: all ease 1s;
      transition: all ease 1s;
  }
  #panel {
      float:left;
      width:100%;
      height:300px;
      padding:2%;
      background:red;
      border:1px solid #fff;
      clear:both;
      display:none;
  }
  &lt;/style&gt;
  
  &lt;script&gt;
  $(function(){
  $('.toggle').click(function() {
      $(".third").toggleClass("full").queue(function(){
      $('#panel').slideToggle(1000).delay(1000);
  });
  });
  });
  &lt;/script&gt;
  </code></pre>