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

  1. <title>Our Business Card!</title>  
  2.   <link rel="stylesheet" href="Style.css">  
  3.  <script language="javascript" type="text/javascript">  
  4.   
  5.  function display1() {  
  6.   
  7.   var base    = document.getElementById("myBiz");  
  8.   var person1 = base.getElementsByTagName("companyName")[0];  
  9.   var name = "Name: " + person1.getElementsByTagName("Name")[0].firstChild.data;  
  10.   var phLable1 = person1.getElementsByTagName("phone")[0].getAttribute("type") + ": ";  
  11.   var phone1 = phLable1 + person1.getElementsByTagName("phone")[0].firstChild.data;  
  12.   var phLable2 = person1.getElementsByTagName("phone")[1].getAttribute("type") + ": ";  
  13.   var phone2 = phLable2 + person1.getElementsByTagName("phone")[1].firstChild.data;  
  14.   var email = "email: " + person1.getElementsByTagName("email")[0].firstChild.data;  
  15.   var company;  
  16.  company = "Company: " + person1.getElementsByTagName("company")[0].firstChild.data;  
  17.   
  18.  document.getElementById("name").innerHTML = name;  
  19.  document.getElementById("phone1").innerHTML = phone1;  
  20.  document.getElementById("phone2").innerHTML = phone2;  
  21.  document.getElementById("email").innerHTML = email;  
  22.  document.getElementById("company").innerHTML = company;  
  23. }  
  24.   
  25. function display2() {  
  26.   
  27.  var base = document.getElementById("myBiz");  
  28.  var person1 = base.getElementsByTagName("companyName")[1];  
  29.  var name = "Name: " + person1.getElementsByTagName("Name")[0].firstChild.data;  
  30.  var phLable1 = person1.getElementsByTagName("phone")[0].getAttribute("type") + ": ";  
  31.  var phone1 = phLable1 + person1.getElementsByTagName("phone")[0].firstChild.data;  
  32.  var phLable2 = person1.getElementsByTagName("phone")[1].getAttribute("type") + ": ";  
  33.  var phone2 = phLable2 + person1.getElementsByTagName("phone")[1].firstChild.data;  
  34.  var email = "email: " + person1.getElementsByTagName("email")[0].firstChild.data;  
  35.  var company;  
  36. company = "Company: " + person1.getElementsByTagName("company")[0].firstChild.data;  
  37.   
  38.   document.getElementById("name").innerHTML = name;  
  39.   document.getElementById("phone1").innerHTML = phone1;  
  40.   document.getElementById("phone2").innerHTML = phone2;  
  41.   document.getElementById("email").innerHTML = email;  
  42.   document.getElementById("company").innerHTML = company;  
  43. }  
  44.   
  45. function hide() {  
  46.          document.getElementById("email").style.display = 'none';  
  47.      }  
  48.   
  49.      function show() {  
  50.          document.getElementById("email").style.display = '';  
  51.      }  
  52.   
  53.  </script> <xml id="myBiz" style="display: none;"> <companynames> <companyname> <name>Satish B</name> <phone type="home" primary="call me">(91) 9844552841</phone> <phone type="work">(91) 9844119841</phone> <email>satish@technotip.org</email> <company>Technotip IT Solutions</company> </companyname> <companyname> <name>Shwetha</name> <phone type="home">(91) 123456789</phone> <phone type="work" primary="call me">(91) 987654321</phone> <email>shwetha@microsoft.com</email> <company>Microsoft</company> </companyname> </companynames> </xml><div class="companyName"><div class="Name" id="name"></div><div class="phone1" id="phone1"></div><div class="phone2" id="phone2"></div><div class="email" id="email"></div><div class="company" id="company"></div></div><a href="javascript:hide()">Hide Email</a> || <a href="javascript:show()">Show Email</a>   

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


[youtube https://www.youtube.com/watch?v=CFoBb-4PJ8A]

YouTube Link: https://www.youtube.com/watch?v=CFoBb-4PJ8A [Watch the Video In Full Screen.]



Business card Styling
Style.css

  1. .companyName  
  2. {  
  3.     font-familyVerdana;  
  4.     font-size18px;  
  5.     colorred;  
  6.     displayblock;  
  7.     padding10px;  
  8.     margin20px;  
  9.     background-color: ivory;  
  10.     width400px;  
  11.     border5px;  
  12.     border-colorgray;  
  13.     text-alignleft;  
  14. }  
  15.   
  16. .Name   
  17. {  
  18.     displayblock;  
  19.     font-weightbold;  
  20. }  
  21.   
  22. .phone   
  23. {  
  24.     displayblock;  
  25. }  
  26.   
  27. .company  
  28. {  
  29.     display:block;  
  30. }  
  31.   
  32. .email  
  33. {  
  34.     displayblock;  
  35.     color: Green;  
  36. }  

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.