Gudday all
I have been looking at using JS to hide/show content. It has been harder than I thought and now I am (almostly) shameless using others ideas.
I have been making progress but have hit a road block. I am ‘losing’ the section title when I select the show content.
The code in the body section is
<!-- ACT stockists -->
<p><a href="#" id="ACT-show" class="showLink" onclick="showHide('ACT');return false;">ACT</a></p>
<div id="ACT" class="more">
For your nearest stockists please look at the NSW or Vic lists.
<p><a href="#" id="ACT-hide" class="hideLink" onclick="showHide('ACT');return false;">Hide this content.</a></p>
</div>
whilst the JS itself is
<script language="javascript" type="text/javascript">
function showHide(shID) {
if (document.getElementById(shID)) {
if (document.getElementById(shID+'-show').style.display != 'none') {
document.getElementById(shID+'-show').style.display = 'none';
document.getElementById(shID).style.display = 'block';
}
else {
document.getElementById(shID+'-show').style.display = 'inline';
document.getElementById(shID).style.display = 'none';
}
}
}
</script>
I an losing the title ACT when I click on the ACT link itself. I would like to keep it visible if possible.
I am sure the answer is frightfully simple but I cannot find it.
Also I note that many sites use ‘+’ to expand the content and ‘-’ to hide said content. I presume that those symbols must be images. Is that correct and are they readily available or must one roll their own?
Have you considered using a library like jQuery or Prototype? It will be much faster to write, one line of code to toggle, one line of code to swap an image…
Here for example is the TreeView plugin for jQuery.
There are several demos of what you can do with it.
Even if you don’t want to use a code library, the demos can be good inspiration for what you want to achieve.
Here is a short JS script that hides/shows the content. You can avoid lots of duplication of you set up the display style on page load.
[HIGHLIGHT=“”]
<!doctype HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=windows-1252”>
<title>Show/hide</title>
<script type=“text/javascript”>
<!–
var actObj; // global
// set display on target object on page load
window.onload=function()
{ actObj=document.getElementById(“ACT”)
actObj.style.display=“block”;
}
// ---------
function showHide()
{ var hide_show =(actObj.style.display==“block”)? “none” : “block”;
actObj.style.display=hide_show;
return false;
}
// —
//–>
</script>
<style type=“text/css”>
<!–
body { font-family:arial, helvetica, sans-serif; font-weight:bold; font-size:13px; color:#000; text-align:left; margin:3px 0px; }
#wrap { position:relative; top:0px; left:0px; width:400px; height:400px; margin-left:100px; }
–>
</style>
</head>
<body>
<div id=“wrap”>
<!-- ACT stockists –>
<p><a href=“#” onclick=“return showHide()”>Hide/Show Content</a></p>
<p>ACT</p>
<div id=“ACT”>
<p class=“a”>For your nearest stockists please look at the NSW or Vic lists.
</div>
</div>
<!-- end wrap –>
</body>
</html>
Still so much to learn. 
Allan P
Thank you for that. Perhaps I should have explained it just a little more.
Each state of Australia will have its own section e.g. ACT, NSW, Vic etc:
Would I need to create
window.onload=function()
for each state?
Here is a script that shows/hides each state after you click the state label. The correct <p> is identified using a class name “state”. The handler is assigned to each of these on page load. The content divs are also hidden on page load.
[HIGHLIGHT=“”]
<!doctype HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=windows-1252”>
<title>Show/Hide All States</title>
<script type=“text/javascript”>
<!–
// set display on target objects on page load
window.onload=function()
{ // hide all divs
var allDivsObj=document.getElementById(“allDivs”);
// get collection of divs
var getDivs=allDivsObj.getElementsByTagName(“div”);
// hide all divs to start
for(var i=0;i<getDivs.length; i++){ getDivs[i].style.display=“none”; }
//
// get collection of Ps with class=“state”
var getPs=allDivsObj.getElementsByTagName(“p”);
for(var i=0;i<getPs.length;i++)
{// assign onclick handler to each P
if(getPs[i].className==“state”)
{ getPs[i].onclick=function()
{ var divRef=this.innerHTML;
var divObj=document.getElementById(divRef);
var hide_show =(divObj.style.display==“block”)? “none” : “block”;
divObj.style.display=hide_show;
}
}
}
}
// —
//–>
</script>
<style type=“text/css”>
<!–
body { font-family:arial, helvetica, sans-serif; font-weight:bold; font-size:13px; color:#000; text-align:left; margin:3px 0px; }
#wrap { position:relative; top:0px; left:0px; width:600px; height:600px; }
#allDivs { position:absolute; top:20px; left:20px; width:300px; }
#allDivs p { margin-top:0px; margin-bottom:10px; cursor:pointer; }
.state { font-size:14px; color:#000080; text-decoration:underline; }
.a { color:#F00; }
.b { color:#00F; }
–>
</style>
</head>
<body>
<div id=“wrap”>
<div id=“allDivs”>
<p class=“b”>Click a State to show/hide details</p>
<p class=“state”>ACT</p>
<div id=“ACT”>
<p class=“a”>For your nearest stockists please look at the NSW or Vic
lists.
</div>
<p class=“state”>NSW</p>
<div id=“NSW”>
<p class=“a”>For your nearest stockists please look at the NSW or Vic
lists.
</div>
<p class=“state”>QLD</p>
<div id=“QLD”>
<p class=“a”>For your nearest stockists please look at the NSW or Vic
lists.
</div>
<p class=“state”>VIC</p>
<div id=“VIC”>
<p class=“a”>For your nearest stockists please look at the NSW or Vic
lists.
</div>
<p class=“state”>SA/NT</p>
<div id=“SA/NT”>
<p class=“a”>For your nearest stockists please look at the NSW or Vic
lists.
</div>
<p class=“state”>WA</p>
<div id=“WA”>
<p class=“a”>For your nearest stockists please look at the NSW or Vic
lists.
</div>
</div>
<!-- end allDivs –>
</div>
<!-- end wrap –>
</body>
</html>