JQuery Toggle Slide Function

JQuery Toggle Slide Function

I'm sure this is a simple fix, but I can't figure it out.

When clicked, the following code it MEANT TO turn my hamburger to a 'X' and at the same time create a slide down toggle which opens "header-nav". Once clicked again (now on the 'X'), it turns back into a hamburger and the "header-nav" is slide back up and hidden away....

but...

what it's actually doing is the opposite. It shows the 'X' when it's closed and the hamburger once it's opened. Hmm. Any ideas?

HTML:

    <div class="skip-links">
                <a href="#header-nav" class="skip-link skip-nav">
          <span></span>
          <span></span>
          <span></span>
          <span></span>
                    <span class="icon"></span>
                    <span class="label">MENU</span>
                </a>
    </div> </div>

CSS:

    .skip-link.skip-nav span {
       display: block;
       position: absolute;
       height: 3px;
       width: 30%;
       border-radius: 9px;
       opacity: 1;
       left: 0;
       -webkit-transform: rotate(0deg);
       -moz-transform: rotate(0deg);
       -o-transform: rotate(0deg);
       transform: rotate(0deg);
       -webkit-transition: .25s ease-in-out;
       -moz-transition: .25s ease-in-out;
      -o-transition: .25s ease-in-out;
       transition: .25s ease-in-out;
    }
   
   
    .skip-link.skip-nav span:nth-child(1) {
       top: 0px;
       background: #ccc;
    }
   
    .skip-link.skip-nav span:nth-child(2),.skip-link.skip-nav span:nth-child(3) {
       top: 10px;
       background: #ccc;
    }
   
   
    .skip-link.skip-nav span:nth-child(4) {
       top: 21px;
       background: #ccc;
    }
   
    .skip-link.skip-nav.open span:nth-child(1) {
       top: 18px;
       width: 0%;
       left: 50%;
       background: #000;
    }
   
    .skip-link.skip-nav.open span:nth-child(2) {
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      -o-transform: rotate(45deg);
      transform: rotate(45deg);
      background: #000;
    }
   
    .skip-link.skip-nav.open span:nth-child(3) {
      -webkit-transform: rotate(-45deg);
      -moz-transform: rotate(-45deg);
      -o-transform: rotate(-45deg);
      transform: rotate(-45deg);
      background: #000;
    }
   
    .skip-link.skip-nav.open span:nth-child(4) {
      top: 18px;
      width: 0%;
      left: 50%;
      background: #000;
    }
   
    .skip-link.skip-nav .label {
        margin-top: 80px;
    }

JQUERY:

    jQuery(document).ready(function(){
    jQuery('.skip-link.skip-nav').click(function(){
    jQuery(this).toggleClass('open');
    jQuery('#header-nav').slideToggle(200);
        });
    });

The thing that seems to be knocking it out is the line:

    jQuery('#header-nav').slideToggle(200);

It works in the opposite way with this. But I need this for the "slide" affect.