チェックボックス（ラジオボタン）で作るアコーディオン

概要

チェックボックスを使う事で、複数のパネルを同時に開閉できます。

input type を radio に変更すると、常に一つのパネルが開閉されるはず。

name と id の部分を変更する事で、一ページに複数の独立したアコーディオンを設置できます。

Mobile Safari では、label の属性 for が使えないので、少しだけ工夫してみた。iPad で動作は確認済み。

初めに展開しておきたいパネルがある場合は、input にchecked を付ける。チェックボックスの場合は、複数につけられます。

height を指定しないと、アニメーションしないと言うジレンマ。なので、縦幅が固定になります。

因みに、overflow に auto を指定しているので、縦幅が溢れた場合はスクロールバーが出ます。（iPhone/iPad/iPod は、二本指（iOS5以降は一本指）でスクロールして下さい）

動作確認

以下のブラウザとバージョンで正常な動作を確認しました。

Internet Explorer 9 ：アニメーションのみ非対応

Firefox 10.0.2

Google Chrome 12.0.742.112

Safari 5.1.3

Opera 11.50

その他

ラジオボタンで作るタブ

<div class="Accordion">
    <div class="Item">
        <input type="checkbox" name="Accordion" id="checkbox-ac1"/>
        <label for="checkbox-ac1">
            <div class="AccordionItem">アコーディオン１</div>
            <div class="AccordionPanel">
                <div>アコーディオン１内容</div>
            </div>
        </label>
    </div>
    <div class="Item">
        <input type="checkbox" name="Accordion" id="checkbox-ac2" />
        <label for="checkbox-ac2">
            <div class="AccordionItem">アコーディオン２</div>
            <div class="AccordionPanel">
                <div>アコーディオン２内容</div>
            </div>
        </label>
    </div>
    <div class="Item">
        <input type="checkbox" name="Accordion" id="checkbox-ac3" />
        <label for="checkbox-ac3">
            <div class="AccordionItem">アコーディオン３</div>
            <div class="AccordionPanel">
                <div>アコーディオン３内容</div>
            </div>
        </label>
    </div>
    <div class="Item">
        <input type="checkbox" name="Accordion" id="checkbox-ac4" />
        <label for="checkbox-ac4">
            <div class="AccordionItem">アコーディオン４</div>
            <div class="AccordionPanel">
                <div>アコーディオン４内容</div>
            </div>
        </label>
    </div>
    <div class="Item">
        <input type="checkbox" name="Accordion" id="checkbox-ac5" />
        <label for="checkbox-ac5">
            <div class="AccordionItem">アコーディオン５</div>
            <div class="AccordionPanel">
                <div>アコーディオン５内容</div>
            </div>
        </label>
    </div>
</div>

/* Accordion Style */
.Item { position:relative; }

input[type='checkbox'], input[type='radio'] {
	width:100%;
	display:block;
	position:absolute;
	opacity:0;
	height:35px;
	top:0;
	left:0;
	border:none;
	border-radius:0; }

.Accordion {
	background-color:#fff;
	width:100%; }

.AccordionItem {
	line-height:35px;
	height:35px;
	padding:0 5px;
	display:block;
	background: #ffffff;
	background: -moz-linear-gradient(top,  #ffffff 0%, #e5e5e5 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5));
	background: -webkit-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%);
	background: -o-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%);
	background: -ms-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%);
	background: linear-gradient(top,  #ffffff 0%,#e5e5e5 100%);
	border:1px solid #888;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	cursor:pointer;
	margin-top:-1px; }

.AccordionPanel {
	height:0px;
	border:1px solid #888;
	border-top:none;
	transition: all ease-in-out 0.3s;
	-o-transition: all ease-in-out 0.3s;
	-moz-transition: all ease-in-out 0.3s;
	-webkit-transition: all ease-in-out 0.3s;
	overflow:auto; margin-top:-1px; }

.AccordionPanel div { padding:10px; }

input:checked + label .AccordionPanel { height:300px; }

input type を radio に変更してみたサンプル