Browse DevX
Sign up for e-mail newsletters from DevX


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