slideToggle and toggleClass working together?

You can see my current code here http://jsfiddle.net/Km3vf/6/.

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.

When I click on the button again, it removes the class (perfect) but does not toggle the slide. Can anyone help me please?

<html>
<div class="third">

    <h2 class="toggle">CLICK</h2>

    <div id="panel">
        <p>Panel details go here.</p>
    </div>

</div>
</html>

<style>
.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;
}
</style>

<script>
$(function(){
$('.toggle').click(function() {
    $(".third").toggleClass("full").queue(function(){
    $('#panel').slideToggle(1000).delay(1000);
});
});
});
</script>

Solution

Removing the queue does the trick, see it here: http://jsfiddle.net/Km3vf/7/

I've also changed the delay in the chain so now it's:

$('#panel').delay(1000).slideToggle(1000);

See if that's what you wanted.

If you want it to first slideUp when closing, I'm afraid you won't be able to do it using one toggle function, but will have to check for the current state make slight modifications.

Something like this: http://jsfiddle.net/Km3vf/8/