Sideway
output.to from Sideway



Draft for Information Only

Content

Hide or Show an element with CSS by JavaScript
  Code:
  Result:
  Code:
  Result:
  Code:
  Result:

Hide or Show an element with CSS by JavaScript

The feature of visibility property is used to specify whether an loaded element is visible or not. The visibility attribute can be modified by an onclick event through the JavaScript code parameter.

One way is to add an inline JavaScript code.

Code:

<div style="margin:5px;background-color:White">

Press <button onclick="document.getElementById('hidelayer1').style.visibility ='visible';">SHOW</button> to show a "Hidden Element" below<br />

End Element...

</div>

<div id="hidelayer" style="visibility:hidden;margin:5px;background-color:Aqua">

Press <button onclick="document.getElementById('hidelayer1').style.visibility ='hidden';">HIDE</button> to hide a "Hidden Element"<br />

Hidden Element

</div>

Result:

Press to show a "Hidden Element" below
End Element...

Another way is to use JavaScript function.

Code:

<script type="text/javascript">

<!--

(document.getElementById) ? pgok = true : pgok = false;

function lyrhide01a(lyr) {

if (pgok) { document.getElementById(lyr).style.visibility = 'hidden'; }

if (document.layers) { document.layers[lyr].visibility = 'hide'; }

}

function lyrshow01a(lyr) {

if (pgok) { document.getElementById(lyr).style.visibility = 'visible'; }

if (document.layers) { document.layers[lyr].visibility = 'show'; }

}

-->

</script>

<div style="margin:5px;background-color:White">

Press <b onclick="lyrshow01a('hidelayer');">SHOW</b> to show a "Hidden Element" below<br />

End Element...

</div>

<div id="hidelayer" style="visibility:hidden;margin:5px;background-color:Aqua">

Press <b onclick="lyrhide01a('hidelayer');">HIDE</b> to hide a "Hidden Element"<br />

Hidden Element

</div>

Result:

Press SHOW to show a "Hidden Element" below
End Element...

Other CSS attribute can be used to control the layer.

Code:

<script type="text/javascript">

<!--

(document.getElementById) ? pgok = true : pgok = false;

function lyrhide01a(lyr) {

if (pgok) { document.getElementById(lyr).style.visibility = 'hidden'; }

if (document.layers) { document.layers[lyr].visibility = 'hide'; }

}

function lyrshow01a(lyr) {

if (pgok) { document.getElementById(lyr).style.visibility = 'visible'; }

if (document.layers) { document.layers[lyr].visibility = 'show'; }

}

-->

</script>

<div style="margin:5px;background-color:White">

Press <b onclick="lyrshow01a('hidelayer');">SHOW</b> to show a "Hidden Element" below<br />

End Element...

</div>

<div id="hidelayer" style="float:left;visibility:hidden;margin:5px;background-color:Aqua">

Press <b onclick="lyrhide01a('hidelayer');">HIDE</b> to hide a "Hidden Element"<br />

Hidden Element

</div>

Result:

Press SHOW to show a "Hidden Element" below
End Element...

©sideway

ID: 120100010 Last Updated: 1/9/2012 Revision: 0

IMAGE

Home (5)

Business

Management

HBR (3)

Information

Recreation

Hobbies (7)

Culture

Chinese (1097)

English (336)

Reference (66)

Computer

Hardware (149)

Software

Application (187)

Digitization (24)

Numeric (19)

Programming

Web (644)new

CSS (SC)

ASP.NET (SC)

Regular Expression (SC)

HTML

Knowledge Base

Common Color (SC)

Html Entity (Unicode) (SC)

Html 401 Special (SC)

OS (389)new

MS Windows

Windows10 (SC)

.NET Framework (SC)

DeskTop (7)

Knowledge

Mathematics

Formulas (8)

Number Theory (206)

Algebra (20)

Trigonometry (18)

Geometry (18)

Calculus (67)

Complex Analysis (21)

Engineering

Tables (8)

Mechanical

Mechanics (1)

Rigid Bodies

Statics (92)

Dynamics (37)

Fluid (5)

Fluid Kinematics (5)

Control

Process Control (1)

Acoustics (19)

FiniteElement (2)

Biology (1)

Geography (1)

Latest Updated Links

Copyright © 2000-2019 Sideway . All rights reserved Disclaimers last modified on 10 Feb 2019