X
Publisher: Sigit purnomo kangsigit.com@gmail.com

How to Display Objects with Div OnClick

There are times when we need something that is not shown directly and will only be displayed when the target wants.

Basically, the trick is just to hide while using CSS Style and will be displayed through Javascript in the HTML link Div.

Advertisement

» The first step, we must define the object to be hidden. Assume that I would hide the word "Yippee" with code like the following:
<div id="hore">Yippee</div>

» The second step, we prepare the HTML code as a trigger like this:
<div onclick="clickHere();" id="displayNow">Display Now</div>

» The third step, add CSS Style:
<style>
#hore{display:none;color:red;font-size:18px;font-family:cursive}
#displayNow{cursor:pointer;padding:3px 10px;color:blue;background:#eee;width:130px;text-align:center;font-size:23px;margin:10px 0}
</style>

"If the above code is installed, then the word "Yippee" will not be seen and to call him, we need a draft script."


» The fourth step, we prepare a script like this:
<script>
function clickHere(){
document.getElementById("hore").style.display="block"; // merubah display:none pada id="hore" menjadi display:block
}
</script>

Advertisement

Examples:

Display Now
Yippee
Need help..?
Do not hesitate to tell us .. !!

How to Display Objects with Div OnClick
Add Comments
0 Comments
Click Here to Add Comments

No Comment