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 is used to add definition lists into a <dl> element?
<dt> <dd> <li>
<dl>
 <dt>HTML</dt>
  <dd> - Hyper Text Markup Language</dd>
  <dd> - Language for web pages</dd>
</dl>
Which CSS property can hide an element on page, letting an empty space in its place?
display position visibility
#id {
  visibility: hidden;
}
Click on the event which is triggered when the mouse clicks on an object.
onclick onmouseover onfocus
document.getElementById("id").onclick = function(){
  alert("http://CoursesWeb.net/");
}
Indicate the PHP variable that contains the contents of both $_GET, $_POST, and $_COOKIE arrays.
$_SESSION $_GET $_REQUEST
if(isset($_REQUEST["id"])) {
  echo $_REQUEST["id"];
}
Show and Hide HTML elements

Last accessed pages

  1. Dog Mahjong (6631)
  2. Mahjong Games (19943)
  3. Colors In The Sky 2 (1496)
  4. Farm Frenzy2 (384)
  5. Editing, Changing XML - E4X (1061)

Popular pages this month

  1. Flash Games - Free online Games (1360)
  2. Qwop (1158)
  3. Tunnel Rush (1062)
  4. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (983)
  5. Drag Racer V3 (758)