Menu
Hi All,
I was trying to write a script that would hide/show different div’s on a webpage with the click of a button. I have a “hide all” button, a “show all” button, and buttons to minimize three different div elements, which are categorized by three separate css classes (observation, interpretation, application). I managed to get the script working properly, but I was looking for some advice on how to better write this code (it all seems redundant).
I know there has to be a better way to use less code, and have each button reference the same function(s). (Currently I have a function set up for each button.) Also, I was wondering if there was a way to have the “hide all” button show on the screen, but when you press that button, it gets replaced by the “show all” button. Any advice and pointers would be great because as I am learning JavaScript, I would like to learn it the correct way (I don’t want learn bad coding practices) Thanks in advance. The code is posted below:
[CODE]
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-type” content=”text/html;charset=UTF-8″ />
<title>Bible Study Notes</title>
<script type=”text/javascript”>
/* <![CDATA[ */
function hideAll() {
var hideAll = document.getElementsByTagName(‘div’);
for(var i=0; i<hideAll.length; ++i) {
if(hideAll[i].className == ‘observation’) {
hideAll[i].style.display = ‘none’;
}
if(hideAll[i].className == ‘interpretation’) {
hideAll[i].style.display = ‘none’;
}
if(hideAll[i].className == ‘application’) {
hideAll[i].style.display = ‘none’;
}
}
document.onclick = hideAll;
return false;
}
function showAll() {
var showAll = document.getElementsByTagName(‘div’);
for(var j=0; j<showAll.length; ++j) {
if(showAll[j].className == ‘observation’) {
showAll[j].style.display = ‘block’;
}
if(showAll[j].className == ‘interpretation’) {
showAll[j].style.display = ‘block’;
}
if(showAll[j].className == ‘application’) {
showAll[j].style.display = ‘block’;
}
}
document.onclick = showAll;
return false;
}
function hideOb() {
var hideOb = document.getElementsByTagName(‘div’);
for(var i=0; i<hideOb.length; ++i) {
if(hideOb[i].className == ‘observation’) {
hideOb[i].style.display = ‘none’;
}
}
document.onclick = hideOb;
return false;
}
function hideIn() {
var hideIn = document.getElementsByTagName(‘div’);
for(var i=0; i<hideIn.length; ++i) {
if(hideIn[i].className == ‘interpretation’) {
hideIn[i].style.display = ‘none’;
}
}
document.onclick = hideIn;
return false;
}
function hideAp() {
var hideAp = document.getElementsByTagName(‘div’);
for(var i=0; i<hideAp.length; ++i) {
if(hideAp[i].className == ‘application’) {
hideAp[i].style.display = ‘none’;
}
}
document.onclick = hideAp;
return false;
}
/* ]]> */
</script>
<style type=”text/css”>
#header {
text-align: center;
}
#maincontent {
line-height: 1.5em;
font-size: 110%;
}
.verse {
font-style: italic;
color: 000000;
}
.observation, .interpretation, .application {
color: #000FF0;
}
.max {
display: inline;
visibility: hidden;
}
input.b {
width: 30px;
height: 25px;
}
</style>
</head>
<body>
<div id=”header”>
<h1>The Book of Exodus Chapter 1</h1>
</div>
<div id=”maincontent”>
<div id=”icons”>
<form name=”toggleControl” action=”” method=”post”>
<input type=”button” value=” hide ” onclick=”hideAll()” title=”Hide all fields” /> <input type=”button” value=” show ” onclick=”showAll()” title=”Expand all fields”/> <input type=”button” class=”b” value=” o ” onclick=”hideOb()” title=”Hide Observation” /> <input type=”button” class=”b” value=” i ” onclick=”hideIn()” title=”Hide Interpretation” /> <input type=”button” class=”b” value=” a ” onclick=”hideAp()” title=”Hide Application” />
</form>
</div>
<div class=”verse”>
This is the first verse of Exodus Chapter 1
</div>
<div class=”observation”>
Observations of chapter 1 verse 1
</div>
<div class=”interpretation”>
Interpretation of chapter 1 verse 1
</div>
<div class=”application”>
Application from chapter 1 verse 1
</div>
<div class=”verse”>
This is the second verse of Exodus Chapter 1
</div>
<div class=”observation”>
Observations of chapter 1 verse 2
</div>
<div class=”interpretation”>
Interpretation of chapter 1 verse 2
</div>
<div class=”application”>
Application from chapter 1 verse 2
</div>
</div>
</body>
</html>