jQueryのtoggle buttonを閉じた状態から表示させたい

Question

前提・実現したいこと

勉強を始めて2ヶ月の初心者です。
HTML/CSSでサイトのコーティングをしています。
jQueryでトグルボタンを使いたいのですが、メニュー内の項目が開いた状態からサイトが表示されてしまうのを直したいです。

該当のソースコード

    <header>
        <div class="container">

            <div class="container-small">

                <a href="index.html" class="headA">LOGGER</a>

                <button type="button" class="headC">MENU</button>

            </div>

            <nav class="headB">
                <ul>
                    <li><a href="index.html">トップ</a></li>
                    <li><a href="contents.html">CONTENTS</a></li>
                    <li><a href="about.html">ABOUT</a></li>
                    <li><a href="contact.html">お問い合わせ</a></li>
                </ul>

            </nav>
        </div>
    </header>

@media(max-width: 767px){
    /* 小さい画面の設定 */
    header .container-small{
        display: flex;
        align-items: center;
        justify-content: space-between;

    }
   

    .headerC:hover{
        opacity: 0.3;
    }


}



@media(min-width: 768px){
    /* 大きい画面の設定 */
    .headC{
        display: none;
    }
    .headB{
        display: block !important;
    }
}

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

    <script>
        $(function(){

            $(".headC").click(function () {
                $(".headB").slideToggle();
            });
        });

    </script>

試したこと

過去の質問から検索し、display: none;を記入してみましたが、ボタン自体が表示されなくなってしまいます。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

menuが閉じていればいいんですよね？

$(function(){
  $(".headB").hide();
  $(".headC").on('click',function () {
    $(".headB").slideToggle();
  });
});

Comments

[hommaA]

解決しました！
ありがとうございました。