jQueryを使わずに実装する開閉切り替え付きアコーディオン
アコーディオンといえば、一般的にjQuery+css3で実装するものが広く知られていますが、大抵はシンプルでフラットなデザインのものが多いですよね。でもページのデザインによっては、cssベースのボタンではなく画像ボタンを置きたい!…なんて場合もあるのではないでしょうか?まさしくそんな状況のなか、私が試行錯誤した方法を以下に書き留めておきます。
HTML
<div class="accordion">
<div class="ac-content">
<label class="toggle" for="ac-cap">
<img class="auto" src="../tab.png" /></label>
<input id="ac-cap" type="checkbox">
<div class="ac-cont">
<dl>
<dt>見出し</dt>
<dd>テキスト</dd>
</dl>
</div>
</div><!--ac-content-->
</div><!--accordion-->
CSS
.accordion {
margin: 0 auto;
padding: 0;
}
.accordion .ac-content {
margin: 0;
padding: 0;
}
.accordion input {
display: none;
}
.accordion label {
width: 100%;
cursor: pointer;
box-sizing: border-box;
display: block;
vertical-align: middle;
position: relative;
}
.accordion .ac-cont {
transition: all .5s;
height: 0;
overflow: hidden;
padding: 0 10px;
box-sizing: border-box;
opacity: 0;
}
.accordion input:checked + .ac-cont {
height: auto;
transition: all .5s;
box-sizing: border-box;
vertical-align: middle;
opacity: 1;
}
.accordion .ac-content .toggle:after {
content: '';
position: absolute;
width: 30px;
height: 20px;
top: 1em;
right: 20%;
background: url(../open.png);
}
.accordion input:checked + .accordion .ac-content .toggle:after {
background: url(../close.png);
}
はじめはとりあえず、ラベル用の画像として矢印(開閉)アイコンなしのものをベースに置き、疑似要素の背景画像でアイコンを切り替える…的なイメージで上記の方法を試してみたものの…上手く動かず。。
数時間格闘した挙句、時間の関係もあり結局画像の切り替え部分のみはjsで制御することにしました。(全然スマートじゃない...)
HTML
<div class="accordion">
<div class="ac-content">
<label onClick="action();" class="toggle" for="ac-cap">
<img id="ac-btn" class="auto" src="../tab_open.png" /></label>
<input id="ac-cap" type="checkbox">
<div class="ac-cont">
<dl>
<dt>見出し</dt>
<dd>テキスト</dd>
</dl>
</div>
</div><!--ac-content-->
</div><!--accordion-->
ラベルの画像を丸ごと切り替えるなら、アイコン一体型の画像1枚で済むので差し替え。
CSS
.accordion {
margin: 0 auto;
padding: 0;
}
.accordion .ac-content {
margin: 0;
padding: 0;
}
.accordion input {
display: none;
}
.accordion label {
width: 100%;
cursor: pointer;
box-sizing: border-box;
display: block;
vertical-align: middle;
position: relative;
}
.accordion .ac-cont {
transition: all .5s;
-webkit-transition: all .5s;
height: 0;
overflow: hidden;
padding: 0 10px;
box-sizing: border-box;
opacity: 0;
}
.accordion input:checked + .ac-cont {
height: auto;
transition: all .5s;
-webkit-transition: all .5s;
box-sizing: border-box;
vertical-align: middle;
opacity: 1;
}
疑似要素部分は不要になったので、まるっと削除。これに加えて…
JavaScript
var pics_src = new Array("../open.png", "../close.png");
var num = 0;
function action() {
if (num == 1) {
num = 0;
} else {
num++;
}
document.getElementById("ac-btn").src = pics_src[num];
}
上記のコードをページに追加。
CSSもJSも比較的シンプルなソースで、画像式の開閉切り替え付きアコーディオン、なんとか形にすることが出来ました。もっとスマートな実装方法もあるんだろうけど…とりあえず軽量なので満足。
サンプル
宜しければ………