title: accordion with image as on off button
body: <p>I have an example of code, it's for accordion</p>
  
  <p>right here <br /></p>
  
  <p><a href="http://jsfiddle.net/hDRMP/18/" rel="nofollow">http://jsfiddle.net/hDRMP/18/</a></p>
  
  <p>The problem is,</p>
  
  <p>I want to change the Lorem/Ipsum into an image.<br />
  So it will be like on off button,<br />
  image1 click, accordion open + image1 change into image2.<br/>
  image2 click, accordion close + image2 change into image1</p>
  
  <p>I have made some modification thorugh it.</p>
  
  <p>CSS</p>
  
  <pre><code>.accordionButton a{
      display: inline-block;
      position: absolute;
      width: 44px;
      height: 44px;
      background:url(image1.png) 0 0 no-repeat;
      text-indent: -9999px;
      cursor:pointer;
      }
  .on{
      background:url(image2.png) 0 0 no-repeat;
      float: left;
      cursor:pointer;
      }
  .over{
      background:url(image1.png) 0 0 no-repeat;
      float: left;
      cursor:pointer;
      }
  </code></pre>
  
  <p>anyone can help?<br />
  Thanks...</p>