アコーディオンといえば、一般的に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も比較的シンプルなソースで、画像式の開閉切り替え付きアコーディオン、なんとか形にすることが出来ました。もっとスマートな実装方法もあるんだろうけど…とりあえず軽量なので満足。

サンプル