Question

I have following code created dynamically with php.

What I want to do is when I click class=’toggle’ with href of desc76, I want to show ul with id desc76.

also I want to change arrowdown16.png to arrowup16.png.

Then when I click it, ul will fadeOut or hidden again.

class, secondul has CSS display:hidden;.

I tried this, but it does not work.

 $(".toggle").click(function () {
    event.preventDefault();
    var id = "#"+$(this).attr('href')
     $("id").show("slow");
    });

HTML:

<ul>
...
...
<li class='toggledetail'>
Show Details
<div>
<a href='desc76' class='toggle' >
<img src="http://blablabla.com/assets/icons/arrowdown16.png"  alt="arrowdown16"  title="Show Details" /></a>
</div>
</li>
</ul>

<ul class='secondul' id='desc76'>
<li class='listdetail'>Spec Details<div>0</div>
</li>
</ul>
<li class='toggledetail'>
Show Details<div>
<a href='desc75' class='toggle' >
<img src="blablabla.com/assets/icons/arrowdown16.png"  alt="arrowdown16"  title="Show Details" /></a>
</div>
</li>
</ul>
<ul class='secondul' id='desc75'>
<li class='listdetail'>Spec Details<div>0</div>
</li>
</ul>

... Here comes more ul
...

Answer 1

Updated for image:

$(".toggle").live('click', function () {
    event.preventDefault();
    var id = "#"+$(this).attr('href');
    // change image of the next element
    $(this).next('img').attr('src', 'path here');
    $("id").show("slow");
});

Note if you want to show/hide the element with click on the same element, you need to use slideToggle instead of show. Or you can use the animate method with opacity:'toggle' for fadding toggle effect.

You need to use live() method for dynamically generated elements:

$(".toggle").live('click', function () {
    event.preventDefault();
    var id = "#"+$(this).attr('href');
    $("id").show("slow");
});