【La forme】アコーディオン実験用 - ガラスアクセサリーショップラフォルム

http://www.laforme.jp

jQueryで超簡単アコーディオン2

IE以外はグラデーションも入っています。
（青：通常のリンク、黄：アコーディオン、ピンク：アコーディオン選択中）

共通設定

HTML

<ul class="accordion">
    <li><a href="#" title="これは普通のナビゲーション">Home(これは普通のナビゲーション)</a></li>
    <li>
        <div class="accordion_head ここにクラス名" title="これはアコーディオン">Company(これはアコーディオン)</div>
        <ul>
            <li><a href="http://uhuru.co.jp/company/" target="_blank">Company Top</a></li>
            <li><a href="http://uhuru.co.jp/company/access/" target="_blank">Access</a></li>
        </ul>
	</li>
    <!--以下略-->
</ul>

CSS

.accordion .accordion_head {cursor:pointer;}

デモ用の装飾例CSSは以下。

/* ----------------------------------------
   common
---------------------------------------- */
#contents ul.accordion {
	height:350px;
	overflow:hidden;
}
#contents ul.accordion,
#contents ul.accordion > li {
	width:230px;
	font-size:12px;
}
#contents ul.accordion > li > a,
#contents ul.accordion > li > .accordion_head {
	display:block;
	width:220px;
	padding:5px;
	background:#bcbcbc;
	background: -webkit-gradient(linear, left center, right center, from(#b6b6b6),to(#c3c3c3));/* webkit */
	background: -webkit-linear-gradient(left,#b6b6b6, #c3c3c3);/* webkit */
	background:    -moz-linear-gradient(left,#b6b6b6, #c3c3c3);/* fx */
	background:      -o-linear-gradient(left,#b6b6b6, #c3c3c3);/* opera */
	background:         linear-gradient(left,#b6b6b6, #c3c3c3);
	
	border-top:solid 1px #cfcfcf;
	border-bottom:solid 1px #aeaeae;
	color:#454545;
}
#contents ul.accordion a {
	text-decoration:none;
}
#contents ul.accordion > li > a:hover {
	background:#06b1b3;
	background: -webkit-gradient(linear, left, right, from(#05a9ab),to(#08b9bb));/* webkit */
	background: -webkit-linear-gradient(left,#05a9ab, #08b9bb);/* webkit */
	background:    -moz-linear-gradient(left,#05a9ab, #08b9bb);/* fx */
	background:      -o-linear-gradient(left,#05a9ab, #08b9bb);/* opera */
	background:         linear-gradient(left,#05a9ab, #08b9bb);
	
	border-top:solid 1px #30ccce;
	border-bottom:solid 1px #068e90;
	color:#FFFFFF;
}
#contents ul.accordion > li > .accordion_head:hover {
	background:#ffa53c;
	background: -webkit-gradient(linear, left, right, from(#f59f3b),to(#ffab48));/* webkit */
	background: -webkit-linear-gradient(left,#f59f3b, #ffab48);/* webkit */
	background:    -moz-linear-gradient(left,#f59f3b, #ffab48);/* fx */
	background:      -o-linear-gradient(left,#f59f3b, #ffab48);/* opera */
	background:         linear-gradient(left,#f59f3b, #ffab48);
	
	border-top:solid 1px #ffac4b;
	border-bottom:solid 1px #d08630;
	color:#FFFFFF;
}
/* ----------------------------------------
   accordionの中身
---------------------------------------- */
#contents ul.accordion li ul {
	width:230px;
	padding:10px 0;
	background:#454545;
}
#contents ul.accordion li li {
	font-size:10px;
	background:#454545;
}
#contents ul.accordion li li a {
	display:block;
	width:205px;
	padding:7px 5px 7px 20px;
	color:#b9b9b9;
}
#contents ul.accordion li li a:hover {
	color:#e93072;
}

1:ノーマルアコーディオン

カスタマイズなしの普通のアコーディオンです。

Home(これは普通のナビゲーション)
Company(これはアコーディオン)
- Company Top
- Access
Blog(これはアコーディオン)
Contact(これは普通のナビゲーション)

クラス名

accordion1

Script

$('.accordion1').click(function() {						 
    $(this).next().slideToggle();
}).next().hide();

2:一つだけ開いているアコーディオン

一番最初のアコーディオンだけ開いています。

クラス名

accordion2

Script

$('.accordion2').click(function() {					   
    $(this).next().slideToggle();
}).next().hide();					   				   
$('.accordion2:first').next().show();

3:一つ開くとアコーディオン

一つのアコーディオンを開くと他は閉まります。

クラス名

accordion3

Script

$('.accordion3').click(function() {							
    $('.accordion3').next().slideUp();
    $(this).next().slideToggle();
}).next().hide();

4:選択中アコーディオン

「選択中のアコーディオンの色を変える」改良版。

クラス名

accordion4

Script

$('.accordion4').click(function() {
    $(this).toggleClass("selected").next().slideToggle();
}).next().hide();

5:一つ開くと選択中アコーディオン

選択中のアコーディオンの色を変えつつ、一つのアコーディオンを開くと他は閉まります。

クラス名

accordion5

Script

$('.accordion5').click(function() {
    $('.accordion5').removeClass("selected").next().slideUp();
    $(this).toggleClass("selected").next().slideToggle();
}).next().hide();