[html5] r6464 - [e] (0) Example of <details> with CSS. Fixing http://www.w3.org/Bugs/Public/show [...]

[whatwg at whatwg.org]

Author: ianh
Date: 2011-08-15 14:46:23 -0700 (Mon, 15 Aug 2011)
New Revision: 6464

Modified:
   complete.html
   index
   source
Log:
[e] (0) Example of <details> with CSS.
Fixing http://www.w3.org/Bugs/Public/show_bug.cgi?id=13615

Modified: complete.html
===================================================================
--- complete.html	2011-08-15 20:58:53 UTC (rev 6463)
+++ complete.html	2011-08-15 21:46:23 UTC (rev 6464)
@@ -53038,7 +53038,28 @@
 
   </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><style>
+ details > summary { transition: color 1s; color: black; }
+ details[open] > summary { color: red; }
+</style>
+<details>
+ <summary>Automated Status: Operational</summary>
+ <p>Velocity: 12m/s</p>
+ <p>Direction: North</p>
+</details></pre>
+
+  </div>
+
+
   <h4 id=the-summary-element><span class=secno>4.11.2 </span>The <dfn><code>summary</code></dfn> element</h4>
 
   <dl class=element><dt>Categories</dt>

Modified: index
===================================================================
--- index	2011-08-15 20:58:53 UTC (rev 6463)
+++ index	2011-08-15 21:46:23 UTC (rev 6464)
@@ -52905,7 +52905,28 @@
 
   </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><style>
+ details > summary { transition: color 1s; color: black; }
+ details[open] > summary { color: red; }
+</style>
+<details>
+ <summary>Automated Status: Operational</summary>
+ <p>Velocity: 12m/s</p>
+ <p>Direction: North</p>
+</details></pre>
+
+  </div>
+
+
   <h4 id=the-summary-element><span class=secno>4.11.2 </span>The <dfn><code>summary</code></dfn> element</h4>
 
   <dl class=element><dt>Categories</dt>

Modified: source
===================================================================
--- source	2011-08-15 20:58:53 UTC (rev 6463)
+++ source	2011-08-15 21:46:23 UTC (rev 6464)
@@ -59699,7 +59699,28 @@
 
   </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><style>
+ details > summary { transition: color 1s; color: black; }
+ details[open] > summary { color: red; }
+</style>
+<details>
+ <summary>Automated Status: Operational</summary>
+ <p>Velocity: 12m/s</p>
+ <p>Direction: North</p>
+</details></pre>
+
+  </div>
+
+
   <h4>The <dfn><code>summary</code></dfn> element</h4>
 
   <dl class="element">