In this page it is presented a simple JavaScript function (showHide() ) that can be used to show and hide multiple HTML elements. This function receives two arguments:
        - idShow - an Array with the IDs of the HTML elements to show.
        - idHide - an Array with the IDs of the HTML elements to hide.

Code of the showHide() function.
/*
 function to show and hide multiple HTML elements - http://coursesweb.net/javascript/
 idShow - an Array with the IDs of the HTML elements to show
 idHide - an Array with the IDs of the HTML elements to hide
*/
function showHide(idShow, idHide) {
  // gets the number of items to traverse with for()
  var nrshow = idShow.length;
  var nrhide = idHide.length;

  // traverses the idShow array to apply display='block' to each ID
  for(var i=0; i<nrshow; i++) {
    if(document.getElementById(idShow[i])) document.getElementById(idShow[i]).style.display = 'block';
  }

  // traverses the idHide array to apply display='none' to each ID
  for(var i=0; i<nrhide; i++) {
    if(document.getElementById(idHide[i])) document.getElementById(idHide[i]).style.display = 'none';
  }
}
- Here's an example of usage of this function. Text with Read-More button that shows a hidden content, and another button that hides that content and displays again the Read-More button.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Example showHide JS function</title><style type="text/css">
.divcnt {
 margin: 1em 20%;
 background:#dedeed;
 border: 1px solid #bbbbbb;
}
.scnt {
 display: none;
 position: relative;
 background: #ededfe;
 padding: 1em 2px 2px 2px;
}
.closesc {
 position: absolute;
 top: 1px;
 right: .3em;
 font-weight: 800;
 color: #ed0001;
 cursor: pointer;
}
.readmc {
 text-decoration: underline;;
 font-weight: 800;
 color: #ed0001;
 cursor: pointer;
}
</style>
</head>
<body>
<div class="divcnt">
 Some text, then ... <span id="rc1" class="readmc">Read-More</span>
 <div class="scnt" id="sc1">
  <div class="closesc" id="cl1">X</div>
  The rest of the content, images, media, etc. ...
 </div>  
</div>

<div class="divcnt">
 Beginning introductory text ... <span id="rc2" class="readmc">Read-More</span>
 <div class="scnt" id="sc2">
  <div class="closesc" id="cl2">X</div>
  The complete content<br/>
HTML tags, links, tables, etc.  ...
 </div>  
</div>

<script type="text/javascript">
/*
 function to show and hide multiple HTML elements - http://coursesweb.net/javascript/
 idShow - an Array with the IDs of the HTML elements to show
 idHide - an Array with the IDs of the HTML elements to hide
*/
function showHide(idShow, idHide) {
  // gets the number of items to traverse with for()
  var nrshow = idShow.length;
  var nrhide = idHide.length;

  // traverses the idShow array to apply display='block' to each ID
  for(var i=0; i<nrshow; i++) {
    if(document.getElementById(idShow[i])) document.getElementById(idShow[i]).style.display = 'block';
  }

  // traverses the idHide array to apply display='none' to each ID
  for(var i=0; i<nrhide; i++) {
    if(document.getElementById(idHide[i])) document.getElementById(idHide[i]).style.display = 'none';
  }
}

// Registers onclick to Read-More and X buttons
if(document.getElementById('rc1')) document.getElementById('rc1').onclick = function(){ showHide(['sc1'], [this.id]); };
if(document.getElementById('rc2')) document.getElementById('rc2').onclick = function(){ showHide(['sc2'], [this.id]); };
if(document.getElementById('cl1')) document.getElementById('cl1').onclick = function(){ showHide(['rc1'], [this.parentNode.id]); };
if(document.getElementById('cl2')) document.getElementById('cl2').onclick = function(){ showHide(['rc2'], [this.parentNode.id]); };
</script>
</body>
</html>
Results:
Some text, then ... Read-More
X
The rest of the content, images, media, etc. ...
Beginning introductory text ... Read-More
X
The complete content
HTML tags, links, tables, etc. ...

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag adds a new line into a paragraph?
<b> <br> <p>
First line ...<br>
Other line...
Which CSS property can be used to add space between letters?
text-size word-spacing letter-spacing
#id {
  letter-spacing: 2px;
}
What JavaScript function can be used to get access to HTML element with a specified ID?
getElementById() getElementsByTagName() createElement()
var elm = document.getElementById("theID");
var content = elm.innerHTML;
alert(content);
Click on the "echo" correct instruction.
echo "CoursesWeb.net" echo "CoursesWeb.net"; echo ""CoursesWeb.net";
echo "Address URL: http://CoursesWeb.net";
Show and Hide HTML elements

Last accessed pages

  1. Select in MySQL, Output results in HTML Table (1419)
  2. Golf Putt It In (739)
  3. Disable button and Enable it after specified time (5129)
  4. Flash Games - Free online Games (22975)
  5. Move image from an element /tag to another (1637)

Popular pages this month

  1. Qwop (3219)
  2. Get Attribute (ID, Class, Name, Title, Src) with jQuery (2547)
  3. Get the value of the selected /checked checkboxes in a form (1608)
  4. Insert, Select and Update NULL value in MySQL (1423)
  5. Add, Change, and Remove Attributes with jQuery (1301)