Widget:TestTabs: Unterschied zwischen den Versionen

Version vom 3. Januar 2024, 11:53 Uhr

       <summary class="drizzle">
           How do you create an accordion?
       </summary>

           Easy! As long as you don't have to support IE11 or older browsers you could use <details> and <summary> natively.

   </details>
   <details>
       <summary>
           What if I have to support IE11 or older browsers?
       </summary>

           No worries. The fallback for these elements is quite good. They will display as open. You won't get the open/close mechanism, but you won't lose any content either.

   </details>
   <details>
       <summary>
           What type of content can I have inside one of these?
       </summary>

           Almost anything you'd like. The <details> element allows all <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#flow_content" target="_blank">flow content</a>, which is basically everything.

   </details>
   <details>
       <summary>
           How does it work?
       </summary>

           The <details> element encapsulates the <summary> element. The <summary> becomes the 'label' for the <details> and acts like a button. When clicked, the attribute open is added to the <details> element, making it display. You can therefore style the open and closed states seperately if you'd like.

</details>

@@ Zeile 1: / Zeile 1: @@
-<style>
-brizzle {
-    background-color: red;
-}
-drizzle{
-    background-color: green;
-}
-</style>
-<body>
 <details open class="brizzle">
          <summary class="drizzle">
@@ Zeile 39: / Zeile 30: @@
              The <code>&lt;details&gt;</code> element encapsulates the <code>&lt;summary&gt;</code> element. The <code>&lt;summary&gt;</code> becomes the 'label' for the <code>&lt;details&gt;</code> and acts like a button. When clicked, the attribute <code>open</code> is added to the <code>&lt;details&gt;</code> element, making it display. You can therefore style the open and closed states seperately if you'd like.
          </div>
-    </details>
+</details>
-</body>