slideToggle function leaves some space at the beginning of dropdown list

Question

I have a Pen, in which I have used jQuery slideToggle() function. But, on running the code, it seems like there is some space left on top, and the slide effect starts after that. What could be the possible reason?

$(() => {
  let hidden = true,
    eff = 'slide',
    effFunc;

  let display = () => {
    $('.menu-list').toggle();
  }
  let fader = () => {
    $('.menu-list').animate({
      opacity: 'toggle'
    }, 1000);
  }

  //////////////////////////////////// 
  // Here is the function that makes the slide effect

  let slider = () => {
    $('.menu-list').slideToggle(1000);
  }

  ////////////////////////////////////

  $('input[name="effect"]').on('click', function() {
    if (!hidden) {
      effFunc();
      hidden = !hidden;
    }
    eff = $(this).val();
  });

  $('.menu-head').on('click', function() {
    if (eff == 'disp') {
      effFunc = display;
    } else if (eff == 'fade') {
      effFunc = fader;
    } else if (eff == 'slide') {
      effFunc = slider;
    }

    effFunc();
    hidden = !hidden;
  });
});

@import url('https://fonts.googleapis.com/css?family=Roboto|Tajawal|Muli');
body {
  margin: 0;
  padding: 10px;
  cursor: default;
  user-select: none;
}

span {
  display: inline-block;
  box-sizing: border-box;
}

span.menu-head {
  padding: 9px 0;
  background: #FF872A;
  width: 270px;
  border-radius: 6px 6px 0 0;
  text-align: center;
  color: white;
  text-shadow: 2px 2px 2px #5A5A5A;
  font: 500 16pt Roboto;
}

span.menu-list {
  border-radius: 0 0 6px 6px;
  border: 0.1px solid #D7D7D7;
  background: #D7D7D7;
  width: 270px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  display: none;
}

span.menu-item {
  width: 270px;
  padding: 12px 27px;
  color: #2A7AFF;
  background: #EAEAEA;
  font: 700 16pt Muli;
  transition: all 0.7s;
}

span.menu-item:hover {
  background: #2A9A3F;
  color: #FAFAFA;
}

label.option-label {
  position: fixed;
  top: 10px;
  right: 10px;
  background: #9A9A9A;
  color: #fff;
  width: 25vw;
  max-height: 33vh;
  padding: 20px 12px;
  border-radius: 4px;
  box-shadow: -4px 4px 1px #C7C7C7;
}

label.option-label * {
  margin: 10px 7px;
  font: 600 16pt Tajawal;
}

input[type='radio'] {
  transform: scale(1.5);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class='menu-head'>Social Networks</span><br/>

<span class='menu-list'>
      <span class='menu-item'>CodePen</span>
<span class='menu-item'>Twitter</span>
<span class='menu-item'>Google</span>
<span class='menu-item'>SoloLearn</span>
</span>

<label class='option-label'>
      <label>
        <input type='radio' name='effect' value='disp'/>&nbsp;Show / Hide
      </label>

<br/>
<label>
        <input type='radio' name='effect' value='fade'/>&nbsp;Fade In / Fade Out
      </label>

<br/>
<label>
        <input type='radio' name='effect' value='slide' checked/>&nbsp;Slide Up / Slide Down
      </label>
</label>

Answer 1

it's because the inline-block of .menu-list, add display : block to .menu-list and hide it in th begining with js so it will toggle back to display : block instead of display : inline-blick

$(() => {
  let hidden = true,
    eff = 'slide',
    effFunc;
  $('.menu-list').hide();
  let display = () => {
    $('.menu-list').toggle();
  }
  let fader = () => {
    $('.menu-list').animate({
      opacity: 'toggle'
    }, 1000);
  }

  //////////////////////////////////// 
  // Here is the function that makes the slide effect

  let slider = () => {
    $('.menu-list').slideToggle(1000);
  }

  ////////////////////////////////////

  $('input[name="effect"]').on('click', function() {
    if (!hidden) {
      effFunc();
      hidden = !hidden;
    }
    eff = $(this).val();
  });

  $('.menu-head').on('click', function() {
    if (eff == 'disp') {
      effFunc = display;
    } else if (eff == 'fade') {
      effFunc = fader;
    } else if (eff == 'slide') {
      effFunc = slider;
    }

    effFunc();
    hidden = !hidden;
  });
});

@import url('https://fonts.googleapis.com/css?family=Roboto|Tajawal|Muli');
body {
  margin: 0;
  padding: 10px;
  cursor: default;
  user-select: none;
}

span {
  display: inline-block;
  box-sizing: border-box;
}

span.menu-head {
  padding: 9px 0;
  background: #FF872A;
  width: 270px;
  border-radius: 6px 6px 0 0;
  text-align: center;
  color: white;
  text-shadow: 2px 2px 2px #5A5A5A;
  font: 500 16pt Roboto;
}

span.menu-list {
  border-radius: 0 0 6px 6px;
  border: 0.1px solid #D7D7D7;
  background: #D7D7D7;
  width: 270px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  display: block;
}

span.menu-item {
  width: 270px;
  padding: 12px 27px;
  color: #2A7AFF;
  background: #EAEAEA;
  font: 700 16pt Muli;
  transition: all 0.7s;
}

span.menu-item:hover {
  background: #2A9A3F;
  color: #FAFAFA;
}

label.option-label {
  position: fixed;
  top: 10px;
  right: 10px;
  background: #9A9A9A;
  color: #fff;
  width: 25vw;
  max-height: 33vh;
  padding: 20px 12px;
  border-radius: 4px;
  box-shadow: -4px 4px 1px #C7C7C7;
}

label.option-label * {
  margin: 10px 7px;
  font: 600 16pt Tajawal;
}

input[type='radio'] {
  transform: scale(1.5);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span class='menu-head'>Social Networks</span><br/>

<span class='menu-list'>
      <span class='menu-item'>CodePen</span>
<span class='menu-item'>Twitter</span>
<span class='menu-item'>Google</span>
<span class='menu-item'>SoloLearn</span>
</span>

<label class='option-label'>
      <label>
        <input type='radio' name='effect' value='disp'/>&nbsp;Show / Hide
      </label>

<br/>
<label>
        <input type='radio' name='effect' value='fade'/>&nbsp;Fade In / Fade Out
      </label>

<br/>
<label>
        <input type='radio' name='effect' value='slide' checked/>&nbsp;Slide Up / Slide Down
      </label>
</label>