views:

31

answers:

0

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.