1 <script>

     2     function toggleDisplay(element, button)

     3     {

     4         if (element.style.display == "none")

     5             element.style.display = "";

     6         else

     7             element.style.display = "none";

     8     }

     9 

    10     function toggleVisibility(element, button)

    11     {

    12         if (element.style.visibility == "hidden")

    13             element.style.visibility = "";

    14         else

    15             element.style.visibility = "hidden";

    16     }

    17 

    18 </script>

    19 <p>

    20     Play with the display and visibility toggles. Make sure that turning an inner element visible does not show it if it has a hidden or

    21        non-displaying ancestor, and that making an ancestor visible and displaying shows only its descendants the are visible and displaying.

    22 </p>

    23 <table>

    24     <tr>

    25         <td>

    26             <input type="checkbox" checked="true" onclick="toggleDisplay(document.getElementById('middle'))"> Outer frame display

    27         </td>

    28         <td>

    29             <input type="checkbox" checked="true" onclick="toggleDisplay(document.getElementById('middle').contentDocument.getElementById('inner'))"> Inner frame display

    30         </td>

    31     </tr>

    32     <tr>

    33         <td>

    34             <input type="checkbox" checked="true" onclick="toggleVisibility(document.getElementById('middle'))"> Outer frame visibility

    35             </td>

    36         <td>

    37             <input type="checkbox" checked="true" onclick="toggleVisibility(document.getElementById('middle').contentDocument.getElementById('inner'))"> Inner frame visibility

    38         </td>

    39         <td>

    40             <input type="checkbox" checked="true" onclick="toggleVisibility(document.getElementById('middle').contentDocument.getElementById('inner').contentDocument.getElementById('plugin'))"> Inner plug-in visibility

    41         </td>

    42     </tr>

    43 </table>

    44 

    45 <iframe id="middle" style="height: 400px; width: 400px;" src="resources/nested-plug-ins-outer-frame.html"></iframe>