Blog

HOME > Web > JQuery > 【jQuery】クリックで開閉するアコーディオン

【jQuery】クリックで開閉するアコーディオン

2015/08/03

JQuery

備忘録です。

クリックで開閉するアコーディオンです。
参考サイト
jQueryによるトグル処理
【jquery】クリックで開閉するアコーディオンメニューいろいろ

html基本（最初は開いた状態）

<p id="button">これは#buttonの内容です。</p>　←ここをクリック
<p id="text">これは#textの内容です。</p>

jQuery

$(function(){
    $("#button").click(function(){
    $("#text").toggle();
    });
});

html基本（最初は閉じている状態）

<p class="btn-2">ボタン</p>
<p class="open-2">テキストテキスト</p>

jQuery

//高さ指定
$('.open-2').each(function(){
    $(this).css("height",$(this).height()+"px");
});
//開閉要素を隠す
$('.open-2').hide();
//ボタン要素が押されたら
$('.btn-2').click(function () {
	//現在の状況に合わせて開閉
    $('.open-2').slideToggle('slow');
    //現在の状況に合わせてクラスをつける
    $(this).toggleClass('active');
});

コピペしてCSSを調整するだけで使えます。

ゼヒトモ内でのプロフィール: ROCKSTREAM, ゼヒトモのホームページ作成・制作サービス, 仕事をお願いしたい依頼者と様々な「プロ」をつなぐサービス

カテゴリー

月間アーカイブ

«前の記事

一覧に戻る

次の記事»

最近の投稿

人気の記事

MORE

ミュージシャンズ・プラザ

神社仏閣ホームーページ制作

ホームページ制作問合せ