[e] (0) Example of <details> with CSS.

Fixing http://www.w3.org/Bugs/Public/show_bug.cgi?id=13615 git-svn-id: http://svn.whatwg.org/webapps@6464 340c8d12-0b0e-0410-8428-c7bf67bfef74
whatwg · Aug 15, 2011 · 35788a5 · 35788a5
1 parent 299654e
commit 35788a5
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 0 deletions.
diff --git a/complete.html b/complete.html
@@ -53038,6 +53038,27 @@ <h4 id=the-details-element><span class=secno>4.11.1 </span>The <dfn><code>detail
 
   </div>
 
+  <div class=example>
+
+   <p>Because the <code title=attr-details-open><a href=#attr-details-open>open</a></code>
+   attribute is added and removed automatically as the user interacts
+   with the control, it can be used in CSS to style the element
+   differently based on its state. Here, a stylesheet is used to
+   animate the color of the summary when the element is opened or
+   closed:</p>
+
+   <pre>&lt;style&gt;
+ details &gt; summary { transition: color 1s; color: black; }
+ details[open] &gt; summary { color: red; }
+&lt;/style&gt;
+&lt;details&gt;
+ &lt;summary&gt;Automated Status: Operational&lt;/summary&gt;
+ &lt;p&gt;Velocity: 12m/s&lt;/p&gt;
+ &lt;p&gt;Direction: North&lt;/p&gt;
+&lt;/details&gt;</pre>
+
+  </div>
+
 
   <h4 id=the-summary-element><span class=secno>4.11.2 </span>The <dfn><code>summary</code></dfn> element</h4>
 

diff --git a/index b/index
@@ -52905,6 +52905,27 @@ fur
 
   </div>
 
+  <div class=example>
+
+   <p>Because the <code title=attr-details-open><a href=#attr-details-open>open</a></code>
+   attribute is added and removed automatically as the user interacts
+   with the control, it can be used in CSS to style the element
+   differently based on its state. Here, a stylesheet is used to
+   animate the color of the summary when the element is opened or
+   closed:</p>
+
+   <pre>&lt;style&gt;
+ details &gt; summary { transition: color 1s; color: black; }
+ details[open] &gt; summary { color: red; }
+&lt;/style&gt;
+&lt;details&gt;
+ &lt;summary&gt;Automated Status: Operational&lt;/summary&gt;
+ &lt;p&gt;Velocity: 12m/s&lt;/p&gt;
+ &lt;p&gt;Direction: North&lt;/p&gt;
+&lt;/details&gt;</pre>
+
+  </div>
+
 
   <h4 id=the-summary-element><span class=secno>4.11.2 </span>The <dfn><code>summary</code></dfn> element</h4>
 

diff --git a/source b/source
@@ -59699,6 +59699,27 @@ fur
 
   </div>
 
+  <div class="example">
+
+   <p>Because the <code title="attr-details-open">open</code>
+   attribute is added and removed automatically as the user interacts
+   with the control, it can be used in CSS to style the element
+   differently based on its state. Here, a stylesheet is used to
+   animate the color of the summary when the element is opened or
+   closed:</p>
+
+   <pre>&lt;style>
+ details > summary { transition: color 1s; color: black; }
+ details[open] > summary { color: red; }
+&lt;/style>
+&lt;details>
+ &lt;summary>Automated Status: Operational&lt;/summary>
+ &lt;p>Velocity: 12m/s&lt;/p>
+ &lt;p>Direction: North&lt;/p>
+&lt;/details></pre>
+
+  </div>
+
 
   <h4>The <dfn><code>summary</code></dfn> element</h4>