[e] (0) Add an example of <details>.

Fixing http://www.w3.org/Bugs/Public/show_bug.cgi?id=8668

git-svn-id: http://svn.whatwg.org/webapps@4541 340c8d12-0b0e-0410-8428-c7bf67bfef74

complete.html

@@ -63,6 +63,8 @@
    .apple-table-examples.e2 th[scope=row] { padding-left: 1em; }
    .apple-table-examples sup { line-height: 0; }
 
+   .details-example img { vertical-align: top; }
+
   </style><link href=status.css rel=stylesheet><script>
    var loadTimer = new Date();
    var current_revision = "r" + "$Revision$".substr(11);
@@ -40151,6 +40153,26 @@ <h4 id=the-details-element><span class=secno>4.11.1 </span>The <dfn><code>detail
 
   </div>
 
+  <div class=example>
+
+   <p>The following shows how a <code><a href=#the-details-element>details</a></code> element can be
+   used to hide some controls by default:</p>
+
+   <pre>&lt;details&gt;
+ &lt;dt&gt;Name &amp; Extension:
+ &lt;dd&gt;
+  &lt;p&gt;&lt;input type=text name=fn value="Pillar Magazine.pdf"&gt;
+  &lt;p&gt;&lt;label&gt;&lt;input type=checkbox name=ext checked&gt; Hide extension&lt;/label&gt;
+&lt;/details&gt;</pre>
+
+   <p>One could use this in conjuction with other <code><a href=#the-details-element>details</a></code>
+   in a list to allow the user to collapse a set of fields down to a
+   small set of headings, with the ability to open each one.</p>
+
+   <p class=details-example><img alt="" src=images/sample-details-1.png><img alt="" src=images/sample-details-2.png></p>
+
+  </div>
+
 
 
 <!-- v2DATAGRID

index

@@ -63,6 +63,8 @@
    .apple-table-examples.e2 th[scope=row] { padding-left: 1em; }
    .apple-table-examples sup { line-height: 0; }
 
+   .details-example img { vertical-align: top; }
+
   </style><link href=data:text/css, id=complete rel=stylesheet title="Complete specification"><link href=data:text/css,.impl%20{%20display:%20none;%20}%0Ahtml%20{%20border:%20solid%20yellow;%20} id=author rel="alternate stylesheet" title="Author documentation only"><link href=data:text/css,.impl%20{%20background:%20%23FFEEEE;%20} id=highlight rel="alternate stylesheet" title="Highlight implementation requirements"><link href=status.css rel=stylesheet><script>
    var loadTimer = new Date();
    var current_revision = "r" + "$Revision$".substr(11);
@@ -39986,6 +39988,26 @@ fur
 
   </div>
 
+  <div class=example>
+
+   <p>The following shows how a <code><a href=#the-details-element>details</a></code> element can be
+   used to hide some controls by default:</p>
+
+   <pre>&lt;details&gt;
+ &lt;dt&gt;Name &amp; Extension:
+ &lt;dd&gt;
+  &lt;p&gt;&lt;input type=text name=fn value="Pillar Magazine.pdf"&gt;
+  &lt;p&gt;&lt;label&gt;&lt;input type=checkbox name=ext checked&gt; Hide extension&lt;/label&gt;
+&lt;/details&gt;</pre>
+
+   <p>One could use this in conjuction with other <code><a href=#the-details-element>details</a></code>
+   in a list to allow the user to collapse a set of fields down to a
+   small set of headings, with the ability to open each one.</p>
+
+   <p class=details-example><img alt="" src=images/sample-details-1.png><img alt="" src=images/sample-details-2.png></p>
+
+  </div>
+
 
 
 <!-- v2DATAGRID

source

@@ -44818,6 +44818,26 @@ fur
 
   </div>
 
+  <div class="example">
+
+   <p>The following shows how a <code>details</code> element can be
+   used to hide some controls by default:</p>
+
+   <pre>&lt;details>
+ &lt;dt>Name &amp; Extension:
+ &lt;dd>
+  &lt;p>&lt;input type=text name=fn value="Pillar Magazine.pdf">
+  &lt;p>&lt;label>&lt;input type=checkbox name=ext checked> Hide extension&lt;/label>
+&lt;/details></pre>
+
+   <p>One could use this in conjuction with other <code>details</code>
+   in a list to allow the user to collapse a set of fields down to a
+   small set of headings, with the ability to open each one.</p>
+
+   <p class="details-example"><img src="images/sample-details-1.png" alt=""><img src="images/sample-details-2.png" alt=""></p>
+
+  </div>
+
 
 
 <!-- v2DATAGRID

vocabs-index

@@ -43,6 +43,8 @@
    .apple-table-examples.e2 th[scope=row] { padding-left: 1em; }
    .apple-table-examples sup { line-height: 0; }
 
+   .details-example img { vertical-align: top; }
+
   </style><body class="cfc">
 
   <header class="head"><p><a class="logo" href="http://www.whatwg.org/" rel="home"><img alt="WHATWG" src="/images/logo"></a></p>