[Javascript] Show and hide multiple div tags

Abyss - Information Info at Abyss.ws
Tue May 9 22:57:55 CDT 2006


Thank you for your help....i have some code that works after about 3 or 4 
clicks not the first click though...


still trying to figure that one out...thanks again

----- Original Message ----- 
From: "Cutter (JS Related)" <java.script at cutterscrossing.com>
To: "[JavaScript List]" <javascript at LaTech.edu>
Sent: Tuesday, May 09, 2006 9:09 PM
Subject: Re: [Javascript] Show and hide multiple div tags


> 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"
> _______________________________________________
> Javascript mailing list
> Javascript at LaTech.edu
> https://lists.LaTech.edu/mailman/listinfo/javascript
> 





More information about the Javascript mailing list