Tag: unhide

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 [email protected] Technotip IT Solutions   Shwetha (91) 123456789 (91) 987654321 [email protected] 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.