Webwork
/
Showing and Hiding

Related to opacity are the visibility and display tags

Visibility

The visibility tag has basically two options: visible and hidden.

Source:
<div style="visibility: visible">
<img src="metropolis-robot.jpg" width="207" height="196" alt="metropolis-robot" />
</div>
Web page:
metropolis-robot
Source:
<div style="visibility: hidden">
<img src="metropolis-robot.jpg" width="207" height="196" alt="metropolis-robot" />
</div>
Web page:
metropolis-robot

Combined with a small JavaScript, visibility can be toggled on and off:

Web page:
metropolis-robot
Show Hide
Head:
<script type="text/javascript">
function visibilityHidden() {
document.getElementById("robot").style.visibility="hidden";
}
function visibilityVisible() {
document.getElementById("robot").style.visibility="visible";
}
</script>
Body:
<div id="robot">
<img src="metropolis-robot.jpg" width="207" height="196" alt="metropolis-robot" />
</div>
<div style="text-align: center"><a href="javascript:;" onClick="visibilityVisible('robot')">Show</a>
<a href="javascript:;" onClick="visibilityHidden('robot')">Hide</a></div>

Note that the visibility tag hides the element but does not remove the space that it takes up on the page. The display tag can be used to conceal both.

Display

The display tag can control several display options (inline, block, etc.) but what we're interested here is display:none.

Source:
<div style="display:block">
<img src="robby.jpg" width="150" height="166" alt="robby" />
</div>
Web page:
robby
Source:
<div style="display:none">
<img src="robby.jpg" width="150" height="166" alt="robby" />
</div>
Web page:
robby

The ability to hide and reveal portions of your Web content opens up a wide range of possibilities for presentation.

Mark Twain
Groucho Marx
Marilyn Monroe
George Burns
Tallulah Bankhead
Winston Churchill
Gray Stuff
Pink Stuff
Green Stuff
Blue Stuff
Previous | Webwork Table of Contents | Next >
photographs:

Semblance Portrait Project
The Built World
Greece
Hungary/Czech Republic
Poland
Graffiti
Simple Truths
Israel


Paris
Puebla, Mexico
Spain
Along the Mississippi
Italy
Santa Fe
The Reliance Building
Providence
archive:

Webwork
The Web Page from Hell
The Portals Project
Transition
Insights
Internet Spelling Guide
Ape Silverback (Primate Ruminations)
Revenge of the Movie Poster
GIFs 4 Us
The Web Rules
Webpix
Backgrounds 4 Us
Webpaper
Digital Sketches
Fonts
Sounds
© Jay Boersma