Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
[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
  • Loading branch information
Hixie committed Jan 7, 2010
1 parent e3ce685 commit 395c583
Show file tree
Hide file tree
Showing 6 changed files with 66 additions and 0 deletions.
22 changes: 22 additions & 0 deletions complete.html
Expand Up @@ -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);
Expand Down Expand Up @@ -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
Expand Down
Binary file added images/sample-details-1.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/sample-details-2.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
22 changes: 22 additions & 0 deletions index
Expand Up @@ -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);
Expand Down Expand Up @@ -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
Expand Down
20 changes: 20 additions & 0 deletions source
Expand Up @@ -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
Expand Down
2 changes: 2 additions & 0 deletions vocabs-index
Expand Up @@ -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>
Expand Down

0 comments on commit 395c583

Please sign in to comment.