Login | Register   
RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX

By submitting your information, you agree that devx.com may send you DevX offers via email, phone and text message, as well as email offers about other products and services that DevX believes may be of interest to you. DevX will process your information in accordance with the Quinstreet Privacy Policy.


Essential JavaScript: 8 Cross-Browser Solutions-8 : Page 8

There's a core set of problems that every JavaScript developer will run across sooner or later. This article shows you how to deal with eight of the most common situations.




Building the Right Environment to Support AI, Machine Learning and Deep Learning

Showing and Hiding Layers
Problem 7: How do I show or hide content based on the user's interaction?

Showing and hiding layers is relatively simple. Create a global variable to keep track of the currently visible layer. Then hide the current layer and show the layer you'd like using the visibility property inherent in CSS:

   var currentLayer = 'initialLayer';
   function showLayer(lyr){
      eval(pre + lyr + post).visibility = 'visible';
      currentLayer = lyr;
   function hideLayer(lyr){
      eval(pre + lyr + post).visibility = 'hidden';

The code assumes that the document contains a <div> element with an id attribute set to "initialLayer" and a style attribute with the visibility property set to 'visible'. All the other layers on the page have their visibility property set to 'hidden'. Each trigger mechanism, such as a button or link, includes the appropriate event to show the associated layer:

   <div id="initialLayer" style="visibility: 
      visible;">Initial Content</div>
   <div id="about" style="visibility:hidden;">
      About Content</div>
   <!--Other content -->
   <a href="javascript:showLayer('about')">
      About Trigger</a>

This script only works if you have hidden browser differences in object variables (see the topic Writing Cross-Browser Scripts)

Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.



Thanks for your registration, follow us on our social networks to keep up-to-date