CODEWITHSUNDEEP
jqueryhtmlbutton
user2458768
user2458768

Reputation: 115

show/hide images using buttons - jQuery

I want to show/hide images with the click on a <button>

This is what i tried:

Script:

<script type="text/javascript" >
$(document).ready(function () { 
  $('#buttontest').toggle(function() {
    $('#LogoTest').fadeOut('slow');
  }, function() {
    $('#LogoTest').fadeIn('slow');
  });
});
</script>

HTML:

<input type="button" id="buttontest" value="Show/Hide 1">
<a href="image1.jpg">
 <img src="image1.jpg" border="0" width="900" height="300" alt="image1" target="nowa_strona" id="LogoTest">
</a>
<br>
<input type="button" id="buttontest1" value="Show/Hide 2">
<a href="image2.jpg">
  <img src="image2.jpg" border="0" width="900" height="300" alt="image2" target="nowa_strona" id="LogoTest1">
</a>
<br>

How can i show/hide the images when i click on the corresponding <button>

Upvotes: 0

Views: 13644

Answers (5)

user1912285
user1912285

Reputation: 112

The best ways is wrap your button and image in a div element. Althrough in this case it's not necessary, but by this way you alway sure show/hide correct image. Just add a class name logotest in image, you can make it show/hide when click button with class buttontest.

Here's my example: http://jsfiddle.net/7xhxq/

Upvotes: 0

Amol M Kulkarni
Amol M Kulkarni

Reputation: 21629

You can use the following code:

$(document).ready(function () { 
    $('#YourButtonID').click(function() {
       $('#YourImageID').toggle('slow');
    }
 });

Please Note, the above code works superb. But I don't recommend it since jQuery’s $(document).ready() slows down. Here is the document for your reference.

So, according to that you you should go with alternative for $(document).ready().

For your question, you can do the alternative code something like:

$('#YourButtonID').on("click",function(e)
{  
 $('#YourImageID').toggle('slow');
});

Happy Exploring :)

Upvotes: 0

Code Lღver
Code Lღver

Reputation: 15603

Use the following code:

$(document).ready(function () { 
    $('#buttontest').click(function() {
       $('#LogoTest').toggle('slow');
    }
 });

Upvotes: 0

Neeraj
Neeraj

Reputation: 4489

$('#buttontest').on("click",function(e)
{  
 $('#LogoTest').toggle();
});

$('#buttontest1').on("click",function(e)
{  
 $('#LogoTest1').toggle();
});

See Demo

Hope It helps you

Upvotes: 0

PSR
PSR

Reputation: 40318

.toggle()

This method signature was deprecated in jQuery 1.8 and removed in jQuery 1.9. jQuery also provides an animation method named .toggle() that toggles the visibility of elements. Whether the animation or the event method is fired depends on the set of arguments passed.

Upvotes: 1

Related Questions