×

Welcome to TagMyCode

Please login or create account to add a snippet.
 

Details (HTML Accordion)

0
0
 
0
Language: Text
Posted by: Lori DK
Added: Dec 22, 2020 4:02 PM
Modified: Dec 22, 2020 4:03 PM
Views: 4670
Tags: css html
  1. <details>
  2.     <summary>Details</summary>
  3.     Something small enough to escape casual notice.
  4. </details>
  5.  
  6.     details {
  7.             border: 1px solid #aaa;
  8.             border-radius: 4px;
  9.             padding: .5em .5em 0;
  10.         }
  11.  
  12.         summary {
  13.             font-weight: bold;
  14.             margin: -.5em -.5em 0;
  15.             padding: .5em;
  16.         }
  17.  
  18.         details[open] {
  19.             padding: .5em;
  20.         }
  21.  
  22.         details[open] summary {
  23.             border-bottom: 1px solid #aaa;
  24.             margin-bottom: .5em;
  25.         }

Write a comment

To post comments, please log in or register.