If the items could a be all over the page the easiest way would probably be to modify the class name. The example below will work in IE, but I can't be bothered looking up the equivalents for other browsers:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">


<html>
<head>
        <title>Demo</title>
  <style>
    span.showitem {
     display: ;
    }
    span.hideitem {
     display: none;
    }
  </style>
</head>

<body>

<script>
function showHide(src) {

  for (i=0;i<document.all.length;i++) {
   obj = document.all[i];
    if (obj.className == 'hideitem') {
      obj.className = 'showitem';
    }
    else {
      obj.className = 'hideitem';
    }
  }
}
</script>

<a href="#" onclick="return showHide(this)"> Show Items </a>


<span class="hideitem">item 1</span><br> <span class="hideitem">item 3</span><br> <span class="hideitem">item 3</span><br>

</body>
</html>

Taco Fleur wrote:

Almost,

but not quite ;-))

The items could be spread out all over the page. Like I said, I don't even know if its possible to have these items spread all over the page, all assigned the same ID or CLASS and hide/unhide by changing the property of the ID/CLASS..

Hope it makes sense..


-----Original Message----- From: Spike [mailto:[EMAIL PROTECTED] Sent: Wednesday, 8 October 2003 1:48 PM To: CFAussie Mailing List Subject: [cfaussie] Re: [OT] DHTML Hide/Display


Something like this:



<script>
function showHide(el,src) {
if (el.style.display == '') {
el.style.display = 'none';
src.innerHTML = 'Show Items';
}
else {
el.style.display = '';
src.innerHTML = 'Hide Items';
}
return false;
}
</script>
<a href="#" onclick="return showHide(document.getElementById('hiddenStuff'),this)"> Show Items </a>


<div id="hiddenStuff" style="display:none;">
   <span>item 1</span><br>
   <span>item 3</span><br>
   <span>item 3</span><br>
</div>

Taco Fleur wrote:


Hi (I'm a bit scared asking this question with all these experts sitting right next to me ;-))

Is there anyway to like have about 20 items on page, by default hide them, and when the link "show" is clicked it displays all these items?

I know how to like to do it for one specific item on the page, but can it be done for many items by just referencing to one ID for example?

Example:

Stylesheet
#item {
       display: none;
}


<span id="item">item 1</span> <span id="item">item 2</span> <span id="item">item 3</span> ...........

<a href="" onClick="fnShow();">show</a>

<script>
function fnShow()
{
       getElementById('').blahblahblah = ..........
}
</script>

*Taco Fleur
07 3535 5072*
Tell me and I will forget
Show me and I will remember
Teach me and I will learn

---
You are currently subscribed to cfaussie as: [EMAIL PROTECTED]
To unsubscribe send a blank email to [EMAIL PROTECTED]


MX Downunder AsiaPac DevCon - http://mxdu.com/



-- Stephen Milligan Software Architect for http://www.bestrates.com.au MSN: [EMAIL PROTECTED]



---
You are currently subscribed to cfaussie as: [EMAIL PROTECTED]
To unsubscribe send a blank email to [EMAIL PROTECTED]

MX Downunder AsiaPac DevCon - http://mxdu.com/

Reply via email to