Your Electronic Books

If it is, the value is
set to none, thereby making it invisible. If it isn??™t set to block (which means it??™s set
to none), the script sets the value to block.
function swap(targetId){
if (document.getElementById)
{
target = document.getElementById(targetId);
if (target.style.display == "block")
{
target.style.display = "none";
}
else
{
target.style.display = "block";
}
}
}
Setting up a collapsible div
THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN
190
2. Add a link. Add the code block shown following??”when clicked, the link will toggle
the hidden content. The value within the onclick attribute (hiddenDiv, in this
case) is the id value of the div that this link will toggle.

Toggle div!
3. Add a div, and give it an id value equal to the onclick value from the previous
step. Within the div, add whatever content you want. The style attribute makes
the div initially hidden.

Toggle div!

A combination of the previous two exercises can be seen in action in a previous version
of my Images from Iceland website??”see www.snubcommunications.com/iceland/
iceland-old.html. This site expands on the div toggler by also toggling the arrow images
when a section is toggled, and it shows what you can do with some straightforward
JavaScript, some decent photographs, and a bit of imagination.


Pages:
260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284