WPのwidgetをonclickでslideDownして表示する

Tweet

Pocket

jqueryが入っていなければenqueue scriptして使う。
下記スクリプトは、archiveなどの、widgetで表示する際にリストで表示されるものに使える。
cssで、はじめはwidgetのタイトル以外は非表示にしておく

.widget ul {display:none;}

タイトルをclickしたときにリストを表示するjavascriptをfooterとかに入れておく。

<script type="text/javascript">
var $ = jQuery.noConflict();
// sidebar slide up/down
$('.widgettitle').click(function() {
    var parent_id = $(this).parent().attr('id');// $('.widgettitle');
    if ($('#' + parent_id + ' ul').is(":visible") )
    {
        $('#' + parent_id + ' ul').slideUp('slow', function() {
            // Animation complete.
        });
    }
    else
    {
        $('#' + parent_id + ' ul').slideDown('slow', function() {
            // Animation complete.
        });
    }
});
</script>

このブログでも入れてみている。cssで初期非表示にしていないが、タイトルをクリックすると、widgetのリストが畳まれる／表示するのが確認できる。
上記のではリスト<ul>のものをslideUp/downさせるが、他にも入れたければcssとjsに追記すれば良い。
【追記】
.widgettitleのcssに cursor: pointer; を追加すると、ポインタが指になるからリンクと認識させられて良い。