Question

I’m trying to create an accordion-like interface but multiple sections can be open at once. Also, in addition to expanding a section of content for viewing, I’m swapping the image for the “header” that was clicked. Everything is working but the first click on each “header” does nothing. Each subsequent click works as expected.

Here’s a link to a fiddle that I set up:
http://jsfiddle.net/kJ8t6/5/

Any help would be very much appreciated. I’m been trying to figure this out since yesterday and have to move onto other things.

Thanks in advance.

Answer 1

You don’t need to bind extra click event, since toggle is already a mouse click event. However, you should consider that toggle event is nowadays deprecated, so try to use it with caution.

$("#imgDeliver").toggle(function() {
    $(this).attr("src", "...");
    $('#conDeliver').slideToggle();
}, function() {
    $(this).attr("src", "...");
    $('#conDeliver').slideToggle();
});

DEMO: http://jsfiddle.net/kJ8t6/6/