Colorful Content Accordion


Description: アニメーションしながら縦に開閉するアコーディオン式のパネルです。弾むようなエフェクトが可愛いですね。他のパネルを開くと元々開いていたパネルは閉じられます。サイドメニューにも良さそうですね。easing使用。
Sample: demo
Tutorial: Making a Fresh Content Accordion
License: -

Sample

Note

$(document).ready(function(){
	/* This code is executed after the DOM has been completely loaded */

	/* Changing thedefault easing effect - will affect the slideUp/slideDown methods: */
	$.easing.def = "easeOutBounce";

	/* Binding a click event handler to the links: */
	$('li.button a').click(function(e){

		/* Finding the drop down list that corresponds to the current section: */
		var dropDown = $(this).parent().next();

		/* Closing all other drop down sections, except the current one */
		$('.dropdown').not(dropDown).slideUp('slow');
		dropDown.stop(false,true).slideToggle('slow');

		/* Preventing the default event (which would be to navigate the browser to the link's address) */
		e.preventDefault();
	})

});

Related snippet :

  • Description: 画像を使わず、テキストでスタイリッシュなメニューやボタンを実装します。セレクトコンテンツやドロップダウンにも対応。クロスブラウザにも対応しています。 ...
  • Description: Youtubeにあるようなシェアボタン(クリックでボタンが出現する)を実装します。URL短縮も付いています。 Sample: demo ...
  • Description: クリックでドロップダウンするメニューコンテンツを実装します。スムーズにダウンし、戻りもスムーズです。IE6でもIE7でも全く同様の動きをしてくれます ...
  • Description: プルダウンの項目をチェック形式にするプラグインです。Ctrlを使った複数チェックは非常に面倒で分かり難いので簡易化しよう、というもの。 S ...
  • Description: iPod風のドリルダウンメニューを実装します。メニューのドロップダウンから、ページ推移なしでサイドにフライアウト。省スペースで大量のリンクメニューを ...
  • Description: シンプルなマルチレベルドロップダウンメニューです。クロスブラウザで動作します。アニメーションもなく、汎用的で最も使いやすいかもしれません。 ...
  • Description: マウスオーバーでストンとキャプションが落ちるメニューを実装するプラグインです。エフェクトが可愛いですね。実装にはjquery.easingが使われて ...