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 - https://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 - https://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. Read Excel file data in PHP - PhpExcelReader (56711)
  2. Get and Modify content of an Iframe (12777)
  3. AJAX with POST and PHP (11915)
  4. SHA256 Encrypt hash in JavaScript (5787)
  5. Register and show online users and visitors (22779)

Popular pages this month

  1. Read Excel file data in PHP - PhpExcelReader (448)
  2. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (352)
  3. Register and show online users and visitors (321)
  4. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (302)
  5. Insert, Select and Update NULL value in MySQL (214)