[Javascript] "display none" to all children

[Paul Novitski]

At 5/30/2007 04:15 AM, David Dorward wrote:
>On 30 May 2007, at 10:34, Michael Borchers wrote:
>>I have a main div include several sheets:
>>
>>How can I set style.display = 'none'; to all subsheets ("children
>>of sheet") at once?
>
>Add a class (using the className property) to sheet, and have a
>descendent selector in your stylesheet.

Depending on the details of your markup, two possibilities come to mind:

1) Give the subsheets the same class but different ids:

         <div id="sheet">
             <div class="subsheet" id="subsheet1"></div>
             <div class="subsheet" id="subsheet2"></div>
             <div class="subsheet" id="subsheet3"></div>
         </div>

Then you can set:

         /* disappear all subsheets */
         div.subsheet
         {
                 display: none;
         }

         /* reappear the desired subsheet */
         div#subsheet2
         {
                 display: block;
         }

2) Refer to subsheets by their tagName and different ids:

         <div id="sheet">
             <div id="subsheet1"></div>
             <div id="subsheet2"></div>
             <div id="subsheet3"></div>
         </div>

Then you can set:

         /* disappear all subsheets */
         div.sheet div
         {
                 display: none;
         }

         /* reappear the desired subsheet */
         div#subsheet2
         {
                 display: block;
         }

This second solution, however, will also affect any div nested inside 
subsheet2, and might therefore require:

         /* reappear the desired subsheet and its children */
         div#subsheet2,
         div#subsheet2 div
         {
                 display: block;
         }

Caveat: in the past there has been a limitation of some screen reader 
browsers that they wouldn't report an element whose display property 
was changed from none to block.  Earlier this year a screen reader 
user told me that that was a problem with older software 
only.  However, that probably means that users of older screen 
readers may not be able to make sense of your page if you use this 
technique for toggling divs.

Regards,

Paul
__________________________

Paul Novitski
Juniper Webcraft Ltd.
http://juniperwebcraft.com