123456789101112131415161718192021222324252627282930...>>
ホットサンプル
アコーディオン2

このサンプルは、jQueryのslideToggle(), slideUp()APIを利用してdiv要素に宣言されているテキストを展開したり折りたたみします。サンプルが表示されると２番目のヘッダーが自動的に展開されます。ヘッダーをクリックするとテキストが展開されます。再度ヘッダーをクリックすると折りたたみます。

特定のヘッダーを展開させるには、.eq()を使用します。このAPIの引数には要素のインデックス番号を指定します。たとえば、２番目のヘッダーを展開せるには、.eq(1)のように「１」を指定します。

ヘッダーで使用しているイメージです。右クリックしてダウンロードしてください



ヘッダーのイメージを切り替えるには、toggleClass()を使用します。CSSクラスを「active]に切り替えると、CSSの「backgroud-position: right 5px」が適用されてイメージの矢印が切り替わります。イメージをデフォルトの状態に戻すにはremoveClass()で「active」を削除します。 

$(".accordion h3").eq(1).addClass("active");
$(".accordion p").eq(1).show();

$(".accordion h3").click(function(){
  $(this).next("p").slideToggle("slow")
  .siblings("p:visible").slideUp("slow");
  $(this).toggleClass("active");
  $(this).siblings("h3").removeClass("active");
});

<div class="accordion">
  <h3>Sample Heading #1</h3>
  <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
    Morbi malesuada, ante at feugiat tincidunt, 
    enim massa gravida metus, commodo lacinia massa diam vel eros. 
    Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.
  </p>
</div>


123456789101112131415161718192021222324252627282930...>>