クリック時の要素に基づいて、同じ領域に他の内容を示すjQuery

例えば、 WordPress 無料のテーマの一つである ヘキサ右のアイコンを押すと、「メニュー」、「ウィジェット」、「検索ボックス」がそれぞれ上から下に下がります。

次のようなjQueryスクリプトでこのような効果を得ることができます。

$("div#head > div").hide();
$("li a").click(function () {
   $("#" + $(this).attr("class")).siblings().hide();
    $("#" + $(this).attr("class")).slideToggle(500);
});

• デモ

WordPress 有料テーマに基づいて上記のような効果を自動的に実装するように搭載されている場合がありますが、このような効果をサポートしていない場合、上記のスクリプトを応用して同様の効果を実現することができます。 （注：jsfiddleでうまく動作しますが、実際の環境では、テストしていません。）