1, from the basic start
Source:
<a onclick= "javascript:document.getElementById (' Test '). Style.display=none" > Click Hide id as Test div</a>
<div id= "test" style= "border:1px solid RGB (238, 238, 238); padding:5px; " > This is a Test text </div>
Demo Effect:
Click on the Hide ID test div
This is a piece of test text
This is one of the most basic examples, because you can only click Hide. Note that the initial display property (display) of the div named Test is none, that is, hidden, and the display property of the Div after clicking (onclick) in the link <a> display= ', is to set the div display as default (show)
2, plus conditional judgment to control the display
If you have permission to edit your blog template, you can insert the following JS code between the head
<script type= "Text/javascript" >
function Discontrol (itemid) {
if (document.getElementById (itemid). style.display== ' None ') {
document.getElementById (itemid). style.display= "";
}
else{
document.getElementById (itemid). style.display= "None";
}
}
</script>
The meaning of the code is that when the div with ID itemid is displayed as "Hide/none", it is displayed as "display" and, in other cases, it is displayed as "Hide/none"
When you write a new log, you only need to be in the code editing environment will show or hide the div set ID name, and then in control div display and hidden link on the following format to write:
<a onclick= "Divcontrol (' div id ')" style= "Cursor:pointer" > Link name </a>
Remember to have your div named ID
