Cookbook Home ~ alanwsmith.com ~ links ~ podcast

Details Element Example

This is with no CSS:

Click this to open And when you do, you get more info.

The MDN site has this CSS example:


details {
    border: 1px solid #aaa;
    border-radius: 4px;
    padding: .5em .5em 0;
}

summary {
    font-weight: bold;
    margin: -.5em -.5em 0;
    padding: .5em;
}

details[open] {
    padding: .5em;
}

details[open] summary {
    border-bottom: 1px solid #aaa;
    margin-bottom: .5em;
}
      

TODO: make an example with that