[jQuery] よくあるご質問などで使えるスライド
- 公開日:2013/11/2
この記事は最終更新日から11年以上が経過しています。
Result
jQuery
$(function(){ $(".open").click(function(){ $(this).next(".slideContent").slideToggle("slow"); }); });
css
.open { background-color: #FFCC33; padding: 8px; margin-bottom: 10px; cursor: pointer; } .slideContent { display: none; border: 1px solid #ccc; margin-bottom: 10px; padding: 10px; }
.slideContent
はdisplay: none;
としておきます。あとは見た目の調整です。
.open
でcursor: pointer;
しておくと親切だと思います。
HTML
<div class="slideBox"> <div class="open"> ここをクリックするとスライドして開きます。 </div> <div class="slideContent"> コンテンツをここに記述します。<br> もちろんHTMLを記述できるので何だって表現できます。<br> もう一度クリックするとスライドを閉じます。 </div> </div>