Hiding and Showing Text with JavaScript

Just like there is in PHP, a server-side scripting language, there are multiple ways of doing something in JavaScript, a client-side scripting language. Since I'm no where near being as familiar with JavaScript as PHP, I had to turn to one of my many online friends to extract his expertise in what I was trying to do. Stephen Cronin authors "More Than Scratch The Surface" from his home in Australia, but he hasn't had much time for it since he left his English as a second language teaching job in China. Luckily for me, he found some spare time to share his wisdom through the magic of e-mail.

Hidden Divisions

If you do some searching online, you may find or be familiar with something like this JavaScript snippet:

function ReverseDisplay(d) {
  if (document.getElementById(d).style.display == "none") {
    document.getElementById(d).style.display="block";
  } else {
    document.getElementById(d).style.display="none";
  }
}

With this function, you can use something like <a href="javascript:ReverseDisplay('edit-website-title')">Edit</a> to show or re-hide a division originally hidden with <div id="edit-website-title" style="display:none">. Please notice that it uses only an ID name to identify the division.

The problem I have with this function is that it allows multiple hidden divisions to show at the same time. My website manager would get pretty confusing with all the hidden divisons I want to use. You see, I don't believe in creating a single, separate page to display a form requiring a one-line input field. It's a better "user experience" to have it suddenly appear beneath a link than it is to wait for another page load.

Showing One Hidden Division at a Time

Stephen outdid himself and he did so while he was riding a train. I don't even think he tested the JavaScript function he wrote for me on whatever he was using as his mobile device. Here it is:

var div=document.getElementsByClassName('hide');
for (var i=0; i<div.length; i++) {
  div[i].style.display="none";
}
function ReverseDisplay(d) {
  if (document.getElementById(d).style.display=="none") {
    var hidden = true;
    } else {
    var hidden = false;
  }
  var div=document.getElementsByClassName('hide');
  for (var i=0; i<div.length; i++) {
    div[i].style.display="none";
  }
  if (hidden == true) {
    document.getElementById(d).style.display="block";
  } else {
    document.getElementById(d).style.display="none";
  }
}

I tested it within minutes of receiving it and it does indeed work exactly the way I want it to work. The only change I had to make was to the hidden divisions and that was to add a class name of "hide". Being familiar with class and ID names is one of the reasons that a developer should learn CSS coding along with everything else. Being well-rounded, I can apply styles to the classes, the IDs or both.

Application and Web Development

People like Stephen Cronin make a living from web development. I don't really consider myself a web developer. I consider myself an application developer for web browsers.

Although I have a bit of experience with multiple languages and language extensions, I really like working with PHP and CSS. Now, I'm starting to realize the benefits of knowing JavaScript as well. Unfortunately, I haven't found a great resource for the language like the PHP portal. I would probably have to buy a book or something.

I don't like building GUIs for Windows or anything else, other than what can run in a browser. I always have a personal web server running for development purposes on my home PC. It's what I do when I'm not writing.

Similar Articles:

• How to Detect if JavaScript is Enabled in PHP
• PHP Programming for Beginners: The PHP Open and Close Tag Set in Programming and Display
• A Conditional Comment Form in WordPress
• Self-Taught Programming for the Internet
• Functions for mysqli_connect vs. mysql_connect in PHP