Hide / Show Content: XML & DOM

Video tutorial illustrating the mechanism of hiding and unhiding / showing the XML content inside the DIV tag using DOM.

Before proceeding watch:

Display XML Data With DOM( innerHTML ): XML & Javascript

Business card Content
index.html

 
     
  
 
 
 
 
 
 

  
    Satish B
    (91) 9844552841
    (91) 9844119841
    satish@technotip.org
    Technotip IT Solutions
  

  
    Shwetha
    (91) 123456789
    (91) 987654321
    shwetha@microsoft.com
    Microsoft
  
  
  

 































Hide Email || 
Show Email

 

Here we get the element by its id and set its display style property to none, to hide it from the user. Later when the user clicks on Show link, we remove the display property none and leave it blank.

Video Tutorial: Hide / Show Content: XML & DOM

Business card Styling
Style.css

.companyName
{
    font-family: Verdana;
    font-size: 18px;
    color: red;
    display: block;
    padding: 10px;
    margin: 20px;
    background-color: ivory;
    width: 400px;
    border: 5px;
    border-color: gray;
    text-align: left;
}

.Name 
{
    display: block;
    font-weight: bold;
}

.phone 
{
    display: block;
}

.company
{
    display:block;
}

.email
{
    display: block;
    color: Green;
}

This simple feature can be used to hide and unhide user profile information to the search boots or unauthorized users.
By default, set the email and other fields as hidden. Once the user is logged in or is a friend of the person whose profile is being viewed, then allow the person to access data via show function.