JQueryでのサイドバー開閉パネル。

XCLの方でJQueryを使って色々やっているのを横で見ていた細君が、
WordPressでサイドメニューの開閉パネル（アコーディオン）で
嵌ってるところを持ってきたので、ちょっと調べてみました。
JQuery、僕も良く解ってないのだが…以下備忘録。
 

 
下記サイトを参考に組み込んだとの事だったのですが、
細君のサイトでは隠す部分が入れ子になっていて、
その入れ子部分が表示されないとの事でした。
 
》お手軽WordPress Tips：ウィジェット機能で追加した項目をjQueryを使って開閉パネルにする
 
で、色々調べてみたら、下記サイトを発見。
これらを組み合わせて実装する事にしました。
 
》jQueryで超簡単アコーディオン
 
 
やりたい事のイメージは
こんな感じ。「CATEGORIES」を押すたびに、それ以下の項目の表示・非表示を切り替えます。


 
■HTML

    <li id="categories-1" class="widget widget_categories">
        <h2 class="widgettitle">Categories</h2>
        <ul>
            <li class="cat-item cat-item-10"><a href="https://exsample.com/?cat=10" title="Categories01 に含まれる投稿をすべて表示">Categories01</a>
                <ul class='children'>
                    <li class="cat-item cat-item-11"><a href="https://exsample.com/?cat=11" title="Categories01-01 に含まれる投稿をすべて表示">Categories01-01</a></li>
                    <li class="cat-item cat-item-12"><a href="https://exsample.com/?cat=12" title="Categories01-02 に含まれる投稿をすべて表示">Categories01-02</a></li>
                    <li class="cat-item cat-item-13"><a href="https://exsample.com/?cat=13" title="Categories01-03 に含まれる投稿をすべて表示">Categories01-03</a></li>
                </ul>
            </li>

             <li class="cat-item cat-item-20"><a href="https://exsample.com/?cat=20" title="Categories02 に含まれる投稿をすべて表示">Categories02</a></li>

             <li class="cat-item cat-item-30"><a href="https://exsample.com/?cat=30" title="Categories03 に含まれる投稿をすべて表示">Categories03</a>
                 <ul class='children'>
                    <li class="cat-item cat-item-31"><a href="https://exsample.com/?cat=31" title="Categories03-01 に含まれる投稿をすべて表示">Categories03-01</a></li>
                </ul>
            </li>
        </ul>
    </li>

 
 
■Script

jQuery(document).ready(function(){
     jQuery(".widget h2").click(function(){
          jQuery(this).next().slideToggle("fast");
     }).next().hide();
});

実行させると、まず4行目の.next().hide();が実行されて
「CATEGORIES」以下の項目を非表示にします。
「トリガー(.widget h2)の次の要素(next)を隠す(hide)」という命令だそうです。
 
トリガークリックで実行される3行目は、
「トリガー(.widget h2)の次の要素(next)をスライド(slideToggle)する」
という命令だそうです。この時、jQuery(this)にはクリックした
トリガー（.widget h2）が入っているとの事です。