How to hide elements onclick jquery

Question

I have an image zooming plugin that uses JQuery & there are also buttons above the image when i click the image it zooms in & when i click it again it zooms out.

I need to hide the buttons which are above the images on click for zoom in, & again when i click it for zoom out, buttons should appear again.

How can i do this?

Here is my JQuery code

<script>
    $(document).ready(function(){    
        $('#ex4').zoom({ on:'toggle',duration: 500 });
    });
</script>

html code:

<span class="f1"><a href="#">1</a></span>
<span class="f2"><a href="#">2</a></span>
<span class="f3"><a href="#">3</a></span>
<span class="f4"><a href="#">4</a></span>
<span class="f5"><a href="#">5</a></span>
<span class="f6"><a href="#">6</a></span>

when i click the image for zoom-in all the buttons should hide, when i click the button for zoom-out the buttons should appear again..

how can i do this?

Answer 1

Since you are clicking on the image...

$('img').click(function(){

$('#btnID').slideToggle();

})

Answer 2

use toggle to show or hide:

$(selector).toggle();