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.
/*
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';
}
}
<!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>
<p>Web development courses: <em>CoursesWeb.net</em></p>
h3 {
padding: 2px 0.2em;
}// gets first Div with class="cls", and shows its content
var elm = document.querySelector("div.cls");
alert(elm.innerHTML);if(isset($_POST["field"])) {
echo $_POST["field"];
}