jQueryを使わずに実装する開閉切り替え付き複数アコーディオン

下記記事の応用編メモです。
複数のアコーディオンに対応したい場合。

…とは言っても、かなりjsコードもhtml構成も違うのですが。。

HTML

<div class="accordion">
           <div class="ac-content">
               <label class="toggle" for="ac-cap1"><img name="ac-btn1" onClick="change('ac-btn1','close.png','open.png')" src="../open.png" alt="" /></label>
               <input id="ac-cap1" type="checkbox">
               <div class="ac-cont">
                   <dl>
                       <dt>見出し</dt>
                       <dd>コンテンツ</dd>
                   </dl>
               </div>
           </div>
       </div>
<div class="accordion">
          <div class="ac-content">
              <label class="toggle" for="ac-cap2"><img name="ac-btn2" onClick="change('ac-btn1','close.png','open.png')" src="../open.png" alt="" /></label>
              <input id="ac-cap2" type="checkbox">
              <div class="ac-cont">
                  <dl>
                      <dt>見出し</dt>
                      <dd>コンテンツ</dd>
                  </dl>
              </div>
          </div>
      </div>

インライン記述が増えるぶん、ややソースはゴチャッとしてしまいます。。

JavaScript

function change(iName, imgA, imgB) {
       iObj = document.images[iName];
       n = iObj.src.lastIndexOf("/") + 1;
       iSrc = iObj.src.substring(n, iObj.src.length);
       m = imgA.lastIndexOf("/") + 1;
       rSrc = imgA.substring(m, imgA.length);
       if (iSrc == rSrc) iObj.src = imgB;
       else iObj.src = imgA;
   }

CSSは変更なしです。
当然、この方法であれば項目ごとにアコーディオンボタン画像を個別に替えることだって出来ますよ！（需要があるかどうかは別として…）

サンプル