大したことはしてませんが、後で探すときのためにメモしておきます。
紹介されていたスクリプトを元に、アコーディオン式に開閉する機能を追加してみました。
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!--accordion.js--> $(document).ready(function() { $("div.click").hover(function(){ $(this).css("cursor","pointer"); //マウスオーバー時のカーソルをポインターに変更 },function(){ $(this).css("cursor","default"); }); $("div.accordion").css("display","none"); //開閉させたい部分をデフォルトは非表示に。 $("div.click").click(function(){ $(this).next().slideToggle("fast"); }); }); |
たったこれだけで実現できます。簡単ですね。
div.clickが、「開閉させるためにクリックさせるエリア」で、div.accordionが実際に開閉するエリアです。このあたりは適宜読み替えてください。
また、リンク元の記事のように、メニュー部分などで実装する場合はこのままでもいいのですが、「よくある質問」とか「症例紹介」とか「施工例」など、コンテンツ内で利用する際には、このままだと印刷するときも隠れたままになってしまうので、印刷用のCSSを用意して、display:noneを解除しました。
1 2 |
/*print.css*/ div.accordion{display:block !important;} |
これで、印刷時にはdisplay:blockがimportantで読み込まれますので、印刷時には開いた状態でプリントできるようになります。