アコーディオンメニューの開閉について

Question

前提・実現したいこと

現在CSS/htmlのコーディングを勉強中です。jQueryでアコーディオンメニューを実装したのですが、画面をロードした時点からアコーディオンメニューが開いた状態で表示されます。
おそらく、display:inline-grid;を適用しているからだと思います。
これをロードした時点では閉じた状態にしたいと思い、display:none;を書いたのですが、display:inline-gridに戻すことができません。
どのようにすればロード時に閉じた状態、開いたらinline-gridの状態にできるのでしょうか。

該当のソースコード

<div id="header_nav_SP">
    <ul>
        <li><a href="#"><img src="./images/top_sp/fb.png" alt="facebook"></a></li>
        <li><a href="#"><img src="./images/top_sp/insta.png" alt="instagram"></a></li>
        <img id="sp_navi_btn" src="./images/top_sp/menu_icon.png" alt="menu">
        <ul class="sp_navi_li">
            <li><a href="index.html">ログイン</a></li>
            <li><a href="news.html">カート</a></li>
            <li><a href="company.html">マイページ</a></li>
            <li><a href="#shopping-guide">ショッピングガイド</a></li>
        </ul>                    
    </ul>
</div>

        <script>    //ハンバーガーメニュー用js
          $(function(){
            $(document).ready(function(){
        
              $("#sp_navi_btn").click(function () {
                $(this).next().slideToggle();
              });
        
            });
          });
        </script>

.sp_navi_li{
    display:inline-grid;
    width: 100%;
    position: relative;
    border: 1px solid #eee;
    background-color:#ff6d77;;
    margin: 0;
    padding: 10px 0 10px 0;
    z-index:100;
    

    li{
        
        background-color:#ff6d77;
        text-align: left;
        list-style: none;
        margin: 0;
        padding: 13px 0 13px 0;


      a{
        font-size:20px;
        color: #FFF;
        display: block;
        padding: 22px 0px;
        margin: 0px 15px;
        border-bottom: 1px solid #eee;
        font-size: 14px;
        text-decoration: none;
      }
    li:last-child:after{
           border-bottom:none;
        }
        
        }

    }
.sp_navi_li{
   li:last-child{
       a{
           border-bottom:none;
       }
   }
}

試したこと

display:none;を追記　←　ロード時の表示を消すことができましたが、アコーディオンメニューが縦表示にならず横並びになってしまいます。

Answer 1

こんにちは。
これでいかがでしょうか。

サンプル

        <ul class="sp_navi_li" style="display:none">