Added interactive section and the details element

Author: ericwbailey

partials/section.interactive.hbs

@@ -0,0 +1,17 @@
+<section id="section__interactive" aria-labelledby="title__interactive"><!-- Start of #section__interactive -->
+    <h2 id="title__interactive">Interactive</h2>
+
+    <h3 id="subsection__details">Details</h3><!-- Start of #subsection__details -->
+    <details>
+        <summary>What payment options do you accept?</summary>
+        <p>We accept cash, Visa, American Express, money orders, and personal checks.</p>
+    </details>
+
+    <h4>Notes:</h4>
+    <p>
+        <small>The <code>details</code> element is currently not supported by Microsoft Edge or Internet Explorer. These browsers will <a rel="external noopener" href="https://css-tricks.com/quick-reminder-that-details-summary-is-the-easiest-way-ever-to-make-an-accordion/">display the content in an opened state</a>, as if the <code>open</code> attribute was applied.</small>
+    </p>
+<!-- End of #subsection__details -->
+
+
+</section><!-- End of #section__interactive -->

partials/section.table-of-contents.hbs

@@ -1,21 +1,27 @@
 <nav id="section__table-of-contents" aria-labelledby="title__table-of-contents"><!-- Start of #section__table-of-contents -->
     <h2 id="title__table-of-contents">Table of Contents</h2>
-    <ul>
+
+    <ol>
         <li><a href="#section__about">About</a></li>
         <li><a href="#section__headings">Headings</a></li>
         <li><a href="#section__text-level">Text-level</a>
-            <ul>
+            <ol>
                 <li><a href="#subsection__content">Content</a></li>
                 <li><a href="#subsection__lists">Lists</a></li>
                 <li><a href="#subsection__links">Links</a></li>
                 <li><a href="#subsection__code">Code</a></li>
                 <li><a href="#subsection__symbols">Symbols</a></li>
                 <li><a href="#subsection__emoji">Emoji</a></li>
-            </ul>
+            </ol>
         </li>
         <li><a href="#section__tables">Tables</a></li>
+        <li><a href="#section__interactive">Interactive</a></li>
+            <ol>
+                <li><a href="#subsection__details">Details</a></li>
+                <li><a href="#subsection__dialog">Dialog</a></li>
+            </ol>
         <li><a href="#section__embedded">Embedded</a></li>
-            <ul>
+            <ol>
                 <li><a href="#subsection__image">Image</a></li>
                 <li><a href="#subsection__broken-image">Broken Image</a></li>
                 <li><a href="#subsection__figure-with-caption">Figure with Caption</a></li>
@@ -27,9 +33,9 @@
                 <li><a href="#subsection__video">Video</a></li>
                 <li><a href="#subsection__object">Object</a></li>
                 <li><a href="#subsection__canvas">Canvas</a></li>
-            </ul>
+            </ol>
         <li><a href="#section__forms">Forms</a>
-            <ul>
+            <ol>
                 <li><a href="#subsection__text-input">Text Input</a></li>
                 <li><a href="#subsection__non-text-input">Non-text Input</a></li>
                 <li><a href="#subsection__select">Select</a></li>
@@ -39,8 +45,8 @@
                 <li><a href="#subsection__lockup">Lockup</a></li>
                 <li><a href="#subsection__states-and-validation">States and Validation</a></li>
                 <li><a href="#subsection__autocomplete">Autocomplete</a></li>
-            </ul>
+            </ol>
         </li>
         <li><a href="#section__credit">Credit</a></li>
-    </ul>
+    </ol>
 </nav><!-- End of #section__table-of-contents -->

views/index.hbs

@@ -39,6 +39,10 @@
 
 <hr />
 
+{{> section.interactive}}
+
+<hr />
+
 {{> section.embedded}}
 
 <hr />