Show Hide Hidden Elements Using Javascript

There are many useful scripts that make any visible element on the page to by dynamically hidden or revealed with the aid of the CSS properties "visibility" and "display." in today's tutorial you will see the working example which you can use in web development any suitable purpose.
You can check here the working example here on this page.

Now You see Text

This is the Javascript Text Display example, which is only displayed on request...or Click Hide To hide from here.

  <script type="text/javascript">
      function cs(id) {
        d=document.getElementById("showhide");
        e=document.getElementById(id);
        if (e.style.display == 'none' || e.style.display == "") {
          e.style.display = 'block';
          d.innerHTML = 'Now Hide Again........';
        } else {
          e.style.display = 'none';
          d.innerHTML = 'Show Text Again';
        }
      }
    </script>

Now adding some css for display of text

 #example1 {display: none; margin: 3%; padding: 4%; background-color: #F9F4BF}

Here comes the code text which you can place in between body of web page.

<div><a id="showhide"href="javascript:cs('example1')">Now You see Text</a>
<div id="example1"> This is the Javascript Text Display example, which is
only displayed on request...or <a id="showhide"href="javascript:cs('example1')">
Click Hide</a> To hide from here.</div>

If you have observe carefully ‘Now You see Text‘ is visible just once then only Now Hide Again & Show Text Again appear again. If you like the same text to appear and hide on clicking, again just comment on two lines in in javascript.

 //d.innerHTML = 'Now Hide Again.
// d.innerHTML = 'Show Again';

Another simple script you can use is

<script type="text/javascript">
function vb() {
document.getElementById('a2').style.visibility="visible";
}
function ab()
 {
document.getElementById('a2').style.visibility="hidden";
}
</script>

This has to be placed in between body

<a href="#" onclick="vb();"> Show </a>
<div id="a2" style="visibility:hidden;"><a href="#" onclick="ab();"> Hide</a>
 </div>

Hope you find these codes short, simple and easy to remember, you may further customize as you like.