After the previous post about Simple Show - Hide Button using JQuery for Blogspot, now we are going to talk about How to make Dynamic Show - Hide Button using JQuery for Blogspot.
What is the different?
In previous post, it's only useful if you just have one element to show-hide like the download button on this blog. But if you have more than one show-hide button, that's mean you have to define all the element "id" on the script and you will have a very long script to do that. For example see this post: Solusi Smartfren Lemot 2013. In that post, if we follow the previous instructions, you need to define 6 "id", 3 buttons and 3 show-hide elements. This post will make it simpler by using just one script.
How to do that?
The plan is to define the show-hide element in the button link so we don't need to define it in the script and the button doesn't need to defined at all.
Take a look to this JQuery script:
That is it. You can try the script here http://jsfiddle.net/ardfank/qwV8s/
How it works?
In the script we create a function called showhide(itemid) where "itemid" will be the "id" to the element that will be show or hide. The "id" will be define in button using "javascript: showhide('swh')" where "swh" is the "id" of the element that will be show or hide. The last is to create an element with "swh" id, that will be show or hide by the button.
Note: that the JQuery script must be placed inside $(document).ready(function(){ ... place the script here... };.
That is all, now you can try to implement Dynamic Show - Hide button using JQuery for Blogspot on your blog. Have any problem? Let us discuss it, just comment :D
What is the different?
In previous post, it's only useful if you just have one element to show-hide like the download button on this blog. But if you have more than one show-hide button, that's mean you have to define all the element "id" on the script and you will have a very long script to do that. For example see this post: Solusi Smartfren Lemot 2013. In that post, if we follow the previous instructions, you need to define 6 "id", 3 buttons and 3 show-hide elements. This post will make it simpler by using just one script.
Dynamic Show - Hide button using JQuery for Blogspot
How to do that?
The plan is to define the show-hide element in the button link so we don't need to define it in the script and the button doesn't need to defined at all.
Take a look to this JQuery script:
function showhide(itemid) {
$("#"+itemid).toggle(1000);
};
And the button will be like this:$("#"+itemid).toggle(1000);
};
<button onclick="javascript: showhide('swh')">Button to show-hide</button>
The element to be hide and show:<h1 id="swh">This element will be show and hide</h1>
That is it. You can try the script here http://jsfiddle.net/ardfank/qwV8s/
How it works?
In the script we create a function called showhide(itemid) where "itemid" will be the "id" to the element that will be show or hide. The "id" will be define in button using "javascript: showhide('swh')" where "swh" is the "id" of the element that will be show or hide. The last is to create an element with "swh" id, that will be show or hide by the button.
Note: that the JQuery script must be placed inside $(document).ready(function(){ ... place the script here... };.
That is all, now you can try to implement Dynamic Show - Hide button using JQuery for Blogspot on your blog. Have any problem? Let us discuss it, just comment :D
Categories:
Post a Comment/Report Broken Link: