image not coming the second time i click
i have applied a simple accordian-type list there the lists are all opened
on loading . the problem is that when i click on a tab the first time, the
image should changes from open to close icon, which is fine. but when i
click that same tab again, the content slides down which is fine, but the
image does not change from cklose to 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 i used is:
//for opening and closing content on click of h3, and also 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 AM - 9:00 AM)</span>
</div>
<div class="filterfield"><input type="checkbox" />Morning/Afternoon <br />
<span class="timing">(9:00 AM - 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 just want the open and cose classes (having the respective images) to
also toggle with content.please help
No comments:
Post a Comment