swapping out an image when selector is clicked using jquery

Question

Hello guys,

I have an FAQ and would like to attach an image to the right of the question that tells the person to close if open and open if closed.

This is what I have:

$('.header-person').click(function() {
    $(this).next('.entry').slideToggle("fast")
    return false;
});

I currently have the two images next to the question like so:

question 1  

<span class="icon"><img src="open.png" width="16" height="16" border="0" /></span>


<span style="display:none;" id="icon-delete"><img src="close-32.png" width="16" height="16" border="0" /></span>

Thanks!

Answer 1

Please put the full code so we can see what selectors we can use.

But basically, it looks like all you need to do is this:

$(selectorforopen).toggle();
$(selectorforclosed).toggle();

This basically shows if it's hidden and hides if it's not displayed.

Answer 2

No need to wrap your images in spans. You can just put the class for each image directly on it, and toggle it that way. Additionally, you might want to watch out for the functionality of .next(), as it might not work how you are expecting it to. It only grabs the immediate next sibling. This means that if there are any siblings between the element you call it on and the one you are looking for, you won't find it.

Check out the documentation for .next(): http://api.jquery.com/next/

Instead try using .nextAll() with a filter selector to find the element you want.

Documentation for .nextAll(): http://api.jquery.com/nextAll/

That being said, here's a demo that does what you want (I think): http://jsfiddle.net/Ender/9eXnW/1/

Basically what you want to do is just make sure that you have the visibility of each of the images set properly to start with, then just select them both and call .toggle() on them in your click event.

Check out the code:

$(function() {
    $('.entry').hide();
    $('.header-person').click(function(e) {
        e.preventDefault();
        $(this).nextAll('.entry:first').slideToggle("fast");
        $(this).children('.close-icon, .open-icon').toggle();
    });
});

Additionally, I've changed your return false; to e.preventDefault()