Javascript implements the display and hiding effects of the layer div. use javascript to set the display attribute of css to block (display) and none (hide). The Code is as follows:
[Html]
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title> display and hide of div layers in javascript </title>
<Script type = "text/JavaScript">
Function toggle (targetid)
{
If (document. getElementById)
{
Target = document. getElementById (targetid );
HideShowButtonObj = document. getElementById ('butn ');
If (target. style. display = "block ")
{
Target. style. display = "none ";
HideShowButtonObj. value = "+ Show"
HideShowButtonObj. style. fontWeight = "bold ";
}
Else
{
HideShowButtonObj. value = "-Hide"
HideShowButtonObj. style. fontWeight = "bold ";
Target. style. display = "block ";
Target. style. marginLeft = "50px ";
}
}
Window. event. cancelBubble = true;
Return false;
}
</Script>
<Style type = "text/css">
# Div1
{
Background-color: #000000;
Height: 400px;
Width: 400px;
Display: none;
}
# Configuration_secion
{
FONT-SIZE: x-small;
WIDTH: 100%;
COLOR: #555555.
}
# Butn
{
FONT-WEIGHT: bold
}
</Style>
</Head>
<Body>
<Input type = "button" id = "butn" value = "+ Show" onclick = "toggle ('helloworld')">
</Input>
<Div style = "display: none" width = "100%" class = "ValueText" id = "helloworld">
Hello <br>
World <br>
</Div>
</Body>
</Html>
From Something's column