jquery - Image not coming the second time I click -

i have applied simple accordian-type list there lists opened on loading . problem when click on tab first time, image should changes open close icon, fine. when click same tab again, content slides down fine, image not change cklose open.

the image classes are:

.close_accordianimage{ background:url(../img/close.png) left 9px no-repeat;} .open_accordianimage{ background:url(../img/open.png) left 9px no-repeat;} 

the script used is:

//for opening , closing content on click of h3, , adding of close image on click  <script> $(document).ready(function() {     $("#odd-accordion h3").click(function() {         $(this).next('div').toggle('300');         $(this).addclass('close_accordianimage');     }); });    </script>    <script> $(document).ready(function(){     $('#odd-accordion h3').addclass('open_accordianimage'); }); 

the html code sample is:

<div id="odd-accordion">     <h3 class="filtertitle">seater :</h3>      <div>         <div class="filterfield">             <input type="checkbox" />seater</div>         <div class="filterfield">             <input type="checkbox" />sleeper</div>     </div>      <h3 class="filtertitle">a/c :</h3>      <div>         <div class="filterfield">             <input type="checkbox" />a/c</div>         <div class="filterfield">             <input type="checkbox" />non-a/c</div>     </div>      <h3 class="filtertitle">bus brand :</h3>      <div>         <div class="filterfield">             <input type="checkbox" />volvo/mercedes</div>         <div class="filterfield">             <input type="checkbox" />non-volvo/mercedes</div>     </div>      <h3 class="filtertitle">timing :</h3>      <div>         <div class="filterfield">             <input type="checkbox" />early morning             <br /> <span class="timing">(5:00 - 9:00 am)</span>          </div>         <div class="filterfield">             <input type="checkbox" />morning/afternoon             <br /> <span class="timing">(9:00 - 5:00 pm)</span>          </div>         <div class="filterfield">             <input type="checkbox" />evening             <br /> <span class="timing">(5:00 pm - 9:00 pm)</span>          </div>         <div class="filterfield">             <input type="checkbox" />night             <br /> <span class="timing">(9:00 pm - 5:00 am) </span>          </div>     </div>      <h3 class="filtertitle">fare :</h3>      <div>jquery filer</div> </div> 

i want open , cose classes (having respective images) toggle content.please help

you need this:

$("#odd-accordion h3").click(function () {     $(this).next('div').toggle('300');     if ($(this).hasclass('close_accordianimage')) {         $(this).addclass('open_accordianimage');         $(this).removeclass('close_accordianimage');     } else {         $(this).removeclass('open_accordianimage');         $(this).addclass('close_accordianimage');     } }); 

try fiddle , add correct url images.