That will do the trick.. 
In this case we are looping over all objects in the document and see if the object has 
the class we need to address.
I guess it just can't be done by directly addressing the class itself.

Cheers for that.

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


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/

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