The following code works fine when it is first loaded.
However when I use ajax, then the toggle does not work.
I found that I am not able use toggle with .live function.
How can I change this code with using live function?
This code toggle a div to show and hide and the same time change the icons up and down.
Thanks in advance.
$('.toggle').toggle(
function(){
var id = "#"+$(this).attr('alt');
// this will get desc77 and returns #desc77
var idimg = id+"img";
var arrowup = baseurl+"assets/icons/arrowup16.png";
//another function get the baseurl
$(id).show('slow');
$(idimg).attr('src', arrowup);
}, function() {
var id = "#"+$(this).attr('alt');
// this will get desc77 and returns #desc77
var idimg = id+"img";
var arrowdown = baseurl+"assets/icons/arrowdown16.png";
$(id).hide('slow');
$(idimg).attr('src',arrowdown);
});
HTML
...
<li class='toggledetail toggle' alt='desc83'>
<img src='http://localhost/daikon2/assets/icons/arrowdown16.png'
id='desc83img' alt='arrowdown16' title='Show Details' /></li>
...
...
<ul class='secondul' id='desc84'>
<li class='listdetail'><b>Spec Details</b><div>0</div>
</li>
</ul>
This works only for show/hide Spec Details.
$(".toggle").click(function (event) {
event.preventDefault();
var id = "#"+$(this).attr('href');
$(id).slideToggle("slow");
});
I want to toggle image as well.