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:ノーマルアコーディオン

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

クラス名

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();

6:一括開閉アコーディオン

一括開閉の改良版。選択中も付け加えています。

OPEN

クラス名

accordion6

HTML

ボタン用のコードを追加します。

<div class="accordion_open">OPEN</div>

CSS

ボタン用のCSSを追加します。

お問い合わせページからご応募します。「期間限定、クリスマス連続プレゼント」へ応募する。
▲期間限定プレゼント *}-->
現在位置 :
アコーディオン実験用

ログイン/ログアウト
  • ようこそ ゲストさま。 会員機能(ポイント・マイページなど)をご利用いただく方は、ログインまたは会員登録してください。


ブックマーク

アイテム検索(簡易)
クリア

アイテム検索
× アイテム検索
検索対象を選ぶ
どこから検索するかのご指定が出来ます。
カテゴリーを選ぶ
カテゴリーを絞って検索できます。
価格帯から探す
価格帯を絞って検索できます。
円~ 円まで
色合いから探す
アイテムの色合いから検索できます。
模様などから探す
アイテムの柄・模様などから検索できます。
明度
彩度
素材から探す
ハンドメイド委託作品などの際に、アイテムの素材別に検索できます。
オプション名から探す
「コレクション」のオプション項目名から検索できます。
イメージ・ニュアンスから探す
キーワードから探す
お好きなキーワードで検索できます。
検索開始!!
カウンターが1970000人目の方に、!!ゲットされた方はお問い合わせよりご連絡ください。