Question

I’m new to jQuery and I don’t know what is the best function to replace this:

<span id="fcp-vicon" onClick="be_visible()"><img src="'.$path.'img/blueicons/hidden.jpg" alt="Cambiar a Modo Visible"/></span>

With this:

<span id="fcp-vicon" onClick="be_hidden()"><img src="'.$path.'img/blueicons/visible.jpg" alt="Cambiar a Modo Invisible"/></span>

The idea is that image works like a switch to toggle the visibility of other field.

Thank you very much.

---

Thanks, I need to change the span itself, so I need to change the related image and the inline onClick event.

Answer 1

To add to loktar’s answer…

I assume what you want is an image that toggles the visibility of something else (lets say a div).

What you need is this html:

<span id="fcp-vicon"><img src="'.$path.'img/blueicons/visible.jpg" alt="Cambiar a Modo Invisible"/></span>

and something like this jquery:

$(document).ready(function(){
    // catch the click on the icon
    $('#fcp-vicon').click(function(){
        // toggle the visibility of the other element
        $('#id-of-other-element').toggle();
    });
});

With jquery there is no need for inline javascript! 🙂

EDIT

Sorry, didn’t realise you were changing the image each time…

Ok the best way to do this is to have two images in your span! 🙂

<span id="fcp-vicon">
    <img src="'.$path.'img/blueicons/visible.jpg" alt="Cambiar a Modo Invisible"/>
    <img src="'.$path.'img/blueicons/hidden.jpg" alt="Cambiar a Modo Invisible" style="display:none"/>
</span>

And jquery:

$(document).ready(function(){
    // catch the click on the icon
    $('#fcp-vicon').click(function(){
        // toggle the visibility of the images contained in it
        $(this).find('img').toggle();
        // because the first image is showing and the second hidden
        // when you do this the first image will toggle to hidden
        // and the next one will toggle to visible.
    });
});

This might help: http://jsfiddle.net/tclayson/tPWNN/