How to Hide and Show Image in Your WordPress By Jquery

When you read the article, you need know some basic about jQuery. If you don’t know it yet, you still could have a look before you decide to learn it. A little appropriate change the codes I give, you should also achieve some simple effect by yourself.

Click TWO button to hide or show a image

The effect

The whole codes

<button id="hide-1" type="button" class="btn btn-info">Click here to Hide the image below</button>
<button id="show-1" type="button" class="btn btn-info">Click here to Show the image below</button>
<div><img id="obj-1" src="/wp-content/uploads/2015/08/best-WordPress-plugins-for-writers.jpg" alt="" width="800" height="400" /></div>
<script>// <![CDATA[
jQuery(document).ready(function($){ 
$('#hide-1').click(function() {   $('#obj-1').hide('slow'); });
$('#show-1').click(function() {   $('#obj-1').show('slow'); }); 
});
// ]]></script>

Click One button to hide or show a image

The whole codes

<button id="hide-show-2" class="btn btn-info" type="button">Hide or Show</button>
<div><img id="obj-2" src="/wp-content/uploads/2015/08/search-everthing.jpg" alt="" width="800" height="400" /></div>
<script>// <![CDATA[
jQuery(document).ready(function($){ 
$('#hide-show-2').click(function() {   $('#obj-2').toggle('slow'); });
});
// ]]></script>

Conclusion

The emphasis of above is .show(), .hide(), .toggle() in jQuery.
Do you like this kind content, if you like please leave a comment, I will write more about jQuery in the future. This article is just a little try.