$(function(){ $(".open").click(function(){ $(this).next(".slideContent").slideToggle("slow"); }); });
<div class="slideBox"> <div class="open"> ここをクリックするとスライドして開きます。 </div> <div class="slideContent"> コンテンツをここに記述します。<br> もちろんHTMLを記述できるので何だって表現できます。<br> もう一度クリックするとスライドを閉じます。 </div> </div>
.open { background-color: #FFCC33; padding: 8px; margin-bottom: 10px; cursor: pointer; } .slideContent { display: none; border: 1px solid #ccc; margin-bottom: 10px; padding: 10px; }