jQueryでslideDownさせ全画面表示する（ページ内切り替え）

Question

前提・実現したいこと

Airbnb(https://www.airbnb.jp/host/homes)で1128px以下の時に表示されるヘッダーアイコンをクリックした際のスライドダウンを使った全画面表示でのページ内切り替え

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

display:noneとしているモーダルをクリック
イベントでslideDownを用いて全画面表示をしようとしているのですが、モーダルのslideDownはおろか表示すらされません。

該当のソースコード

アイコンをクリックすると以下のモーダルが全画面表示でslideDownするようにしようとしています。
以下アイコンです。

<div id="menu-show">
        <i class="fab fa-airbnb"></i>
</div>

以下モーダルです。

<div id="menu-list">
        <ul>
          <li class="open">概要</li>
          <li><a href="">準備</a></li>
          <li><a href="">安全</a></li>
          <li><a href="">マネープラン</a></li>            
        </ul>
</div>

#menu-list {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;
    background: white;
    display: none;
     ul{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 85px;
        left: 30px;
        li {
            list-style: none;
            padding: 20px 0;
            font-size: 14px;
            font-weight: bold;
            a {
                color: black; 
            }
        }
        .open {
            color: green;
            border-bottom: 1px solid silver;
            padding-bottom: 15px;
            margin-bottom: 10px;
        }
    }
}

//#menu-showはiconタグに付けています(アイコンをクリックすることでページ表示をさせるため。)

$(function(){
$('#menu-show').click(function(){
        if($('#menu-list').css('display')=='none') {
            $('#menu-list').sildeDown();
        }else {
            $('#menu-list').sildeUp();
        }
    });
});

試したこと

slidedownでは無くjquery上でcssをdisplay:noneからblockに書き換えて表示する方法では動作しました。

jquery自体は動作しているのでscriptの読み込みミスやバージョンが原因ではないと思います。

Answer 1

typoです。
sildeDown→slideDown

コメントを受けて追記

サンプル

Comments

[tkmvictim]

すみませんかなり煮詰まっていてケアレスミスを見落としていました
タイプミス修正しましたが依然としてスライドダウン出来ません。
showメソッドやhideメソッドでは表示、非表示は出来ますがslideDown,slideUpではピクリともしません。

[Lhankor_Mhy]

ご提示のコードを試してみましたが、当方では問題は発生しませんでした。
サンプルを追記しておきます。

[tkmvictim]

回答ありがとうございました。
自分の書いているコード上で何故動作しないのか原因究明してみます。

[Lhankor_Mhy]

予想ですが、wordpressを使っているとか、jQuery slim を使っているとか、そういう理由ではないかな、と思います。

[tkmvictim]

bootstrapと併用して作っていますがWordPressは使用していません。
また、jqueryの読み込みも<script type="text/javascript" src="jquery-3.5.1.min.js"></script>としており、jQuery slimは使用していません。
検証してみた所、slideDownがfunctionとして認識されていないとエラーメッセージが出ているのでjavascriptの競合が起こっているんですかね？

[Lhankor_Mhy]

https://getbootstrap.jp/docs/4.3/getting-started/introduction/

↑bootstrapではslim版を読み込むことが多いので、誤って重複読み込みなどを起こすことがあるのですが、tkmvictimさんのコードではそうではないのですね。
それでは別の原因でしょう。

[tkmvictim]

すみません、bootstrapの公式にあるスターターテンプレートをコピペして使用していたため気付かずslim版を使用していました。
headタグの最後にフル版を読み込み、bodyタグの閉じタグの直前でslim版を読み込んでいたのが原因でした。
ドットインストールで学習してそのままbootstrapを使用していたのであまり理解が出来ていませんでした。
お手数お掛けして申し訳ありませんでした。ありがとうございました。

[Lhankor_Mhy]

ご解決されて何よりです。