Cacher is the code snippet organizer for pro developers

var transitionval = $('.c-mobile-nav').css('transition-duration');
transitionval = transitionval.replace('s', '');
transitionval = transitionval * 1000;
// main function used 
function expandMobileNav() {
  // checks if the mobile header currently is expanded or not
  if (!$('.c-mobile-nav').hasClass('c-mobile-nav--expanded')) {
      // sets the list's display to normal block
      $('.c-mobile-nav__list').removeClass('c-mobile-nav__list--nodisplay');
      // after an extremely small delay it sets all the other classes. This is to prevent the "jumping in"- 
      // of the whole thing. This makes sure the transition actually works
      setTimeout(expandMobileNavTime, 1);
  } else {
      // deletes expanded classes and adds the hidden class to the list
      $('.c-mobile-nav').removeClass('c-mobile-nav--expanded');
      $('.c-mobile-nav__button').removeClass('c-mobile-nav__button--expanded');
      $('.c-mobile-nav__list').addClass('c-mobile-nav__list--hidden');
      // after the delay of the length of the css transition it deletes the height: 100%;
      // prevents letting the user see the instant jump to a smaller height
      setTimeout(addnoDisplay, transitionval);
  }
}

// removes 
function addnoDisplay() {
    $('.c-mobile-nav__list').addClass('c-mobile-nav__list--nodisplay');
    $('.c-mobile-nav').removeClass('c-mobile-nav--full-height');
}

// function to set all the classes, add any new ones you might need
function expandMobileNavTime() {
    $('.c-mobile-nav').addClass('c-mobile-nav--full-height');
    $('.c-mobile-nav').addClass('c-mobile-nav--expanded');
    $('.c-mobile-nav__button').addClass('c-mobile-nav__button--expanded');
    $('.c-mobile-nav__list').removeClass('c-mobile-nav__list--hidden');
}

<div class="c-mobile-nav">
    <button class="c-mobile-nav__button" onclick="expandMobileNav();" type="button">
        <i class="c-mobile-nav__icon fa fa-bars" aria-hidden="true"></i>
    </button>
    <ul class="c-mobile-nav__list c-mobile-nav__list--hidden ">
        <li class="c-mobile-nav__list-item">
            <a class="c-mobile-nav__link" href="{{ url('/') }}">Home</a>
        </li>
        <hr>
        <li class="c-mobile-nav__list-item">
            <a class="c-mobile-nav__link" href="{{ url('/') }}">Auto verkoop</a>
        </li>
        <hr>
        <li class="c-mobile-nav__list-item">
            <a class="c-mobile-nav__link" href="{{ url('/') }}">Modellen</a>
        </li>
        <hr>
        <li class="c-mobile-nav__list-item">
            <a class="c-mobile-nav__link" href="{{ url('/') }}">Over ons</a>
        </li>
        <hr>
        <li class="c-mobile-nav__list-item">
            <a class="c-mobile-nav__link" href="{{ url('/') }}">Contact</a>
        </li>
        <hr>
    </ul>
</div>

$debugtransition: 0.45s ease;
.c-mobile-nav {
    position: fixed;
    display: flex;
    flex-direction: row-reverse;
    z-index: 9000;
    transition: $debugtransition;
    margin-top: 15px;
    max-width: 100%;
    @include custom(0px,320px) {
        flex-direction: column;
        width: 100%;
    }
    @include tablet-up {
        display: none;
    }
    &--expanded {
        padding: 15px;
        margin-top: 0;
        background-color: lighten(black, 15%);
    }
    &--full-height {
        height: 100%;
    }
    &__button {
        align-self: flex-start;
        height: auto;
        margin-left: 25px;
        padding: 10px;
        border: 0;
        border-radius: 4px;
        background-color: rgba(black, 0.8);
        transition: $debugtransition;
        @include custom(0px,320px) {
            margin-bottom: 15px;
        }
        &:focus,
        &:active {
            outline-color: transparent;
        }
        &--expanded {
            background-color: $pink-col-hex;
            @include custom(0px,320px) {
                margin-bottom: 15px;
                margin-left: 10px;
            }
        }
    }
    &__icon {
        color: white;
        font-size: 36px;
    }
    &__list {
        position: relative;
        transition: $debugtransition;
        padding: 0;
        list-style: none;
        width: 200px;
        @include custom(0px, 320px) {
            width: 100%;
        }
        &--hidden {
            visibility: hidden;
            margin-left: -200px;
            @include custom(0px, 320px) {
                margin-left: -100px;
            }
        }
        &--nodisplay {
            display: none;
        }
    }
    &__list-item {
        margin-top: 20px;
        width: 100%;
        &:first-child {
            margin: 0;
        }
    }
    &__link {
        color: white;
        font-size: 18px;
    }
}