[Javascript] "display none" to all children
Paul Novitski
paul at juniperwebcraft.com
Wed May 30 08:36:37 CDT 2007
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
More information about the Javascript
mailing list