Hiding content - keeping title/label

**Tigers!** · May 8, 2011 07:20

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

Code:

<!-- 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

Code JavaScript:

<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?

**speda1** · May 8, 2011 10:13

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...

**paul_wilkins** · May 8, 2011 15:58

Originally Posted by speda1

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.

**AllanP** · May 8, 2011 16:41

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.

Code :

<!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>

**Tigers!** · May 9, 2011 05:58

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

Code:

window.onload=function()

for each state?

**AllanP** · May 9, 2011 23:29

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.

Code :

<!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>

User Tag List

Thread: Hiding content - keeping title/label

Thread Tools

Display

Hiding content - keeping title/label

Bookmarks

Bookmarks

Posting Permissions