[Javascript] Show and hide multiple div tags

[Abyss - Information]

Hi all,

What I am trying to perform is the following.

I am trying to write a function that turns on and off the "display" css property of a particular div

eg

xhtml



<div class="News">
    <div id="NewsItem">
        <h2>News title 1</h2>
        <div id="BriefDescription"></div>
        <div id="ShowExtendedDescription"><a href="#" onclick="jsfncShowHideExtendedDescription(this)">Show Extended Description for this event</a></div>
        <div id="ExtendedDescription"></div>
    </div>
<div class="NewsItem">
        <h2>News title 2</h2>
        <div class="BriefDescription"></div>
        <div class="ShowExtendedDescription"><a href="#" onclick="jsfncShowHideExtendedDescription(this)">Show Extended Description for this event</a></div>
        <div class="ExtendedDescription"></div>
    </div>
</div>

I know that when the page first loaded i would have to set the css property to "display:none;"

but how do i seperate each news item extended description from each other? 

I know i would need an if statement to seperate the "display:none" or "display: block" feature..


this code is all "spat out" from a database so their is no telling how many news items will turn up on the page either.

What I am trying to do is when the show extended description link is clicked it then shows the extended description for that news item only and if its clicked again it hides that information.

any help would be greatly appreciated

Regards
Abyss
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.evolt.org/pipermail/javascript/attachments/20060509/1cd933e7/attachment.htm>