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>
<head>
<title>Title</title>
<style>
.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>
<h4>Example Show / Hide HTML elements with JavaScript</h4>

<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>
/*
 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>
Demo:
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 lists into <ul> and <ol> elements?
<dt> <dd> <li>
<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://coursesweb.net/css/</li>
</ul>
Which value of the "display" property creates a block box for the content and ads a bullet marker?
block list-item inline-block
.some_class {
  display: list-item;
}
Which instruction converts a JavaScript object into a JSON string.
JSON.parse() JSON.stringify eval()
var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}
Indicate the PHP class used to work with HTML and XML content in PHP.
stdClass PDO DOMDocument
$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net
Show and Hide HTML elements

Last accessed pages

  1. Functions, Variable scope and Passing by Reference (1636)
  2. Output or Force Download MP3 with PHP (2272)
  3. Contact page - CoursesWeb (27707)
  4. Tabs effect with CSS (28379)
  5. Dynamic variables in JavaScript (11133)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (1795)
  2. Contact page - CoursesWeb (1750)
  3. Tabs effect with CSS (1744)
  4. PHP getElementById and getElementsByTagName (825)
  5. Get Attribute (ID, Class, Name, Title, Src) with jQuery (702)