Hide / Show Content: XML & DOM

Advertisement:

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
 
<html>
 <head><title>Our Business Card!</title>
 <link rel="stylesheet" href="Style.css" />
  <script language="javascript" type="text/javascript">
 
  function display1() {
 
   var base    = document.getElementById("myBiz");
   var person1 = base.getElementsByTagName("companyName")[0];
   var name = "Name: " + person1.getElementsByTagName("Name")[0].firstChild.data;
   var phLable1 = person1.getElementsByTagName("phone")[0].getAttribute("type") + ": ";
   var phone1 = phLable1 + person1.getElementsByTagName("phone")[0].firstChild.data;
   var phLable2 = person1.getElementsByTagName("phone")[1].getAttribute("type") + ": ";
   var phone2 = phLable2 + person1.getElementsByTagName("phone")[1].firstChild.data;
   var email = "email: " + person1.getElementsByTagName("email")[0].firstChild.data;
   var company;
  company = "Company: " + person1.getElementsByTagName("company")[0].firstChild.data;
 
  document.getElementById("name").innerHTML = name;
  document.getElementById("phone1").innerHTML = phone1;
  document.getElementById("phone2").innerHTML = phone2;
  document.getElementById("email").innerHTML = email;
  document.getElementById("company").innerHTML = company;
 }
 
 function display2() {
 
  var base = document.getElementById("myBiz");
  var person1 = base.getElementsByTagName("companyName")[1];
  var name = "Name: " + person1.getElementsByTagName("Name")[0].firstChild.data;
  var phLable1 = person1.getElementsByTagName("phone")[0].getAttribute("type") + ": ";
  var phone1 = phLable1 + person1.getElementsByTagName("phone")[0].firstChild.data;
  var phLable2 = person1.getElementsByTagName("phone")[1].getAttribute("type") + ": ";
  var phone2 = phLable2 + person1.getElementsByTagName("phone")[1].firstChild.data;
  var email = "email: " + person1.getElementsByTagName("email")[0].firstChild.data;
  var company;
 company = "Company: " + person1.getElementsByTagName("company")[0].firstChild.data;
 
   document.getElementById("name").innerHTML = name;
   document.getElementById("phone1").innerHTML = phone1;
   document.getElementById("phone2").innerHTML = phone2;
   document.getElementById("email").innerHTML = email;
   document.getElementById("company").innerHTML = company;
 }
 
 function hide() {
          document.getElementById("email").style.display = 'none';
      }
 
      function show() {
          document.getElementById("email").style.display = '';
      }
 
  </script>
 
 </head>
 <body onload="display2()">
 
 <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>
 
 </body>
</html>

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


You need to a flashplayer enabled browser to view this YouTube video

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



Business card Styling
Style.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
.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.

Leave a Reply

Your email address will not be published. Required fields are marked *