Title: show/hide images using buttons - jQuery
Tags: jquery;html;button
Question: I want to show/hide images with the click on a <button&gt;
This is what i tried:
Script:
<script type="text/javascript" &gt;
$(document).ready(function () {
$('#buttontest').toggle(function() {
$('#LogoTest').fadeOut('slow');
}, function() {
$('#LogoTest').fadeIn('slow');
</script&gt;
<input type="button" id="buttontest" value="Show/Hide 1"&gt;
<a href="image1.jpg"&gt;
<img src="image1.jpg" border="0" width="900" height="300" alt="image1" target="nowa_strona" id="LogoTest"&gt;
</a&gt;
<br&gt;
<input type="button" id="buttontest1" value="Show/Hide 2"&gt;
<a href="image2.jpg"&gt;
<img src="image2.jpg" border="0" width="900" height="300" alt="image2" target="nowa_strona" id="LogoTest1"&gt;
</a&gt;
<br&gt;
How can i show/hide the images when i click on the corresponding <button&gt;

Here is the accepted answer: 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/
Comment for this answer: Yes, but when site is loaded, we see button and below image, when i click on button image will hide, but i want to that when site is loaded, i will see only button, and image will show when i click on button, next click will hide image.
Comment for this answer: what "it" are you mean? A image or a button?
Comment for this answer: Just use the function `toggle()`. The function `toggle("slow")` will show image if it hidding, and hide image if it's shown. See my example again!
Comment for this answer: Insert `$('img.logotest').hide()` blow the `$(document).ready(function (){`. See: http://jsfiddle.net/7xhxq/1/

Here is another answer: Use the following code:
$(document).ready(function () {
$('#buttontest').click(function() {
$('#LogoTest').toggle('slow');

Here is another answer: .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.

Here is another answer: $('#buttontest').on("click",function(e)
$('#LogoTest').toggle();
$('#buttontest1').on("click",function(e)
$('#LogoTest1').toggle();
See Demo
Hope It helps you

Here is another answer: 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   :)

{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 5, 'CommentCount': 0, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2013:00:06/06/13', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<jquery><html><button>', 'Title': 'show/hide images using buttons - jQuery', 'ViewCount': 13255, 'id': 16957317, 'user_AboutMe': None, 'user_AccountId': 2864126.0, 'user_DisplayName': 'user2458768', 'user_Reputation': 115.0, 'user_Views': 38.0, 'user_id': 2458768.0}}