Simple Toggle


Description: 簡単なコードで実装できる開閉アコーディオンです。Toggleメソッドの基本的な使い方です。テキストをクリックすると隠れたコンテンツが表示されます。
Sample: demo
Tutorial: Simple Toggle with CSS & jQuery
License: -

Sample

いろは

いろはのコンテンツ

いろはにほへと

ここにコンテンツ

123

123のコンテンツ

123456

イー・アル・サン

イー・アルーサンのコンテンツ

イー・アル・サン・スー・ウー・リュー

Note

$(document).ready(function(){
	$(".toggle_container").hide();
	$("h2.trigger").click(function(){
		$(this).toggleClass("active").next().slideToggle("slow");
	});
});

数行のコードで動作します。

Related snippet :

  • Description: FacebookのフッターパネルをjQueryで実装したもの。クリックで隠されていたコンテンツが表示されたり、ツールチップなどもオマージュされていま ...
  • Description: クリックでドロップダウンするメニューコンテンツを実装します。スムーズにダウンし、戻りもスムーズです。IE6でもIE7でも全く同様の動きをしてくれます ...
  • Description: グリッドを守ったレイアウトを構築するプラグインです。モニタサイズに依存することなく、時系列を崩さないレイアウトを守れます。 Sample: ...
  • Description: シンプルなヘルプコンテンツです。クリックすると隠されていたテキストが表示される仕組み。デモでIE8で表示されていませんが、IE6、7では問題ないので ...
  • Description: バー全体が降りてくるタイプのドロップダウンメニューです。横並びに羅列されるので、下部コンテンツを邪魔することもありません。クロスブラウザで動作します ...
  • Description: タブをクリックするとスライドしながら出現するコンタクトフォームを実装出来ます。フィードバック用にもいいですね。 Sample: demo ...
  • Description: シンプルなマルチレベルドロップダウンメニューです。クロスブラウザで動作します。アニメーションもなく、汎用的で最も使いやすいかもしれません。 ...