jquery .slidetoggle() and .toggle() together, first click does nothing then works after that

javascript, jquery

Solution

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/

Problem

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.

Original source