[Javascript] Show and hide multiple div tags

[Cutter (JS Related)]

Or, say you are populating your page via some server-side language 
(ColdFusion is my choice) and outputting x number of articles to the 
page. You would have some sort of record count for the number of 
articles you are outputting, and you can pass this to your js function, 
along with the article you wish to 'show'. (None of this is tested, so 
it might require some tweaking.) Something along these lines:

/*  If you consistently name your articles 'article1,article2,etc.'
     then it becomes very easy to 'show' one element, while hiding
     any others whic may be displayed. For this function, just pass
     in the number of the article to display (artNum) and the total
     count (artCount) of how many articles you have on display */
function showHide(artNum,artCount){
      for(i=1;i<=artCount;i++{
           artID = 'article' + i;
           article = document.getElementById(artID);
           if(i != artNum){
                if(article.style.display == 'block')
                     article.style.display = 'none';
           else
                article.style.display = 'block';
           }
      }
}

-----
Then you would have your articles:

<a href="javascript:void(0);" onclick="showHide(1,2)">Article 1</a>
<div id="article1">blah, blah, blah</div>
<a href="javascript:void(0);" onclick="showHide(2,2)">Article 2</a>
<div id="article2">blah, blah, blah again</div>

-----
Something like that, anyway. Hope it helps.

Cutter
_______
http://blog.cutterscrossing.com


Andrew Gibson wrote:
> something like this:
> 
> where exID is the id of your "ExtendedDescription"
> 
> function showHide(exID)
> {
>   var show=document.getElementById(exID)
> 
>  if(show.style.display=="none")
>     show.style.display="";
>   else
>    show.style.display="none"
> 
> }
> 
> 
> 
> ==========================================
> Perhaps - would it be best to put in an ID for each news item?
> 
> eg
> 
> 
> <div class="News">
>     <div id="NewsItem">
>         <h2>News title 1</h2>
>         <div class="BriefDescription"></div>
>         <div class="ShowExtendedDescription"><a href="#" 
> onclick="jsfncShowHideExtendedDescription('NI1234')">Show Extended 
> Description for this event</a></div>
>         <div id="NI1234" class="ExtendedDescription"></div>
>     </div>
> 
> if so how would I pass the news item to the function? like i have in this 
> example? as a string?
> 
> and how would i tell the browser to change the class for that particular 
> div?
> 
> Thanks
> 
> Regards
> Abyss
> 
> 
> 
> _______________________________________________
> Javascript mailing list
> Javascript at LaTech.edu
> https://lists.LaTech.edu/mailman/listinfo/javascript 
> 
> _______________________________________________
> Javascript mailing list
> Javascript at LaTech.edu
> https://lists.LaTech.edu/mailman/listinfo/javascript

-- 

Cutter
____________
http://blog.cutterscrossing.com

"The Past is a Memory
  The Future a Dream
  But Today is a Gift
  That's why they call it
  The Present"