Simple Show - Hide Button using JQuery for Blogspot

In this post Software Mirrors will give you a trick to make a simple Show - Hide Button using JQuery for Blogspot. If you are new to this blog, you can navigate to every Software Download post in this blog, and you will find my Download button is using Show - Hide button using JQuery.

There are many way to make show - hide button. Most of it using javascript. JQuery is a bundle of javascript to make it easier in building a website.

To make a show - hide button, you need an element to be show or hide, a button or link or element to show or hide the earlier element and script to process the command from the button. In here we use JQuery as the script.

Simple Show - Hide Button using JQuery for Blogspot

Simple Show - Hide Button using JQuery for Blogspot

First make sure you have link to JQuery script in your blog by looking at this script:

You must have just one of that line to be able to run JQuery on your site. For your information, 1.9.1 is the version of the JQuery, it can be different. But if you don't find it on your site, just put the script before </head> tag.

Ok, that is it for JQuery, now we move to make a show - hide button. Take a look at the code below:

Element to be show - hide(Click to open code)
You can use any tag to define an element not only "div" tag, because in this method we use "id" as a selector.

Button to show - hide(Click to open code)

Also in button you can also use any tag, a tag, div tag, input tag, anything. The important thing is to use the right "id" as the selector.

JQuery script(Click to open code)

Define the "id" selector, and process the script.

You can see the preview code here http://jsfiddle.net/fVm7F/. Note, the number 1000 in show(1000) and hide(1000) define the animation time to show-hide the element in millisecond.

There is another way by using a toggle button to show and hide the element. Here the script:

Toggle show - hide script:(Click to open code)

You can also use slideToggle(1000) to have a slide animation. No you are done with Simple Show - Hide Button using JQuery for Blogspot. Don't forget to leave a comment if you have any problem.

Categories:

Post a Comment/Report Broken Link: