HTML&CSS JS ハンバーガーメニューが反応しません

Question

htmlcssで架空サイトを練習で作っています。
ハンバーガーメニューが一切反応せず（開かず）どこが問題か教えていただけますでしょうか。

初心者で質問に不足等ありましたらご指摘いただけると幸いです。

https://gyazo.com/1ed5f9dbbda0018d21ec8864084cb40b

ここに実現したいことを箇条書きで書いてください。
-JSでnav-buttonをCLICKすると、sp-navを開くように設定する

発生している問題・エラーメッセージ

反応がない

該当のソースコード

   <!--ハンバーガー-->
    <div id="nav-button" class="nav-button"><i class="fa fa-bars" aria-label="menu"></i>
        <span class="nav-button-txt">MENU</span>
    </div>
    <nav class="sp-nav">
        <div class="sp-nav-inner">
            <div class="sp-nav-title">
                <span class="contents">CONTENTS</span>
                <span class="dots"></span>
            </div>
            <ul class="sp-navlist">
                <li><a href="#shop"> <img src="./images/top_p/menu-icon.png" alt="menu"></a><span class="nav-txt">お品書き</span></li>
                <li><a href="#menu"> <img src="./images/top_p/omoi-icon.jpg" alt="omoi"></a><span class="nav-txt">Kiyoの想い</span></li>
                <li><a href="#recurit"><img src="./images/top_p/shop-icon.png" alt="shop"></a><span class="nav-txt">店舗案内</span></li>
                <li><a href="#access"><img src="./images/top_p/recuruit-icon.png" alt="recruit"></a><span class="nav-txt">求人情報</span></li>
            </ul>
        </div>

    </nav>

$(document).ready(function(){
    $("nav-button").on("click", function(){
        $("sp-nav").slideToggle();
    });
});

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

クラウド９使用してます。

Comments

[Cocode]

jQueryタグの追加をお願いしますm(_ _)m

Answer 1

classならドット.、idならシャープ#をつけましょうー！

$(document).ready(function(){
    $("#nav-button").on("click", function(){
        $(".sp-nav").slideToggle();
    });
});

Comments

[atokuda]

ご回答ありがとうございます。おっしゃるとおりですね！
修正しましたが、動かず他になにか原因があるのでしょうか。。

[atokuda]

ご指摘箇所とhamburger.jｓのタイトルのつづり間違い修正して解決しました！
ありがとうございます！

[Cocode]

解決してよかったです〜。