Bürokraten, Oberflächenadministratoren, SMW-Administratoren, SMW-Kuratoren, SMW-Editoren, Oversighter, Administratoren, Widget-Bearbeiter
215.199
Bearbeitungen
Widget:TestTabs: Unterschied zwischen den Versionen
keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung |
Keine Bearbeitungszusammenfassung |
||
| Zeile 1: | Zeile 1: | ||
<style> | <style> | ||
. | details div { | ||
background-color: | border-left: 2px solid #000; | ||
border-right: 2px solid #000; | |||
border-bottom: 2px solid #000; | |||
padding: 1.5em; | |||
} | |||
details div > * + * { | |||
margin-top: 1.5em; | |||
} | |||
details + details { | |||
margin-top: .5rem; | |||
} | |||
summary { | |||
list-style: none; | |||
} | |||
summary::-webkit-details-marker { | |||
display: none; | |||
} | |||
summary { | |||
border: 2px solid #000; | |||
padding: .75em 1em; | |||
cursor: pointer; | |||
position: relative; | |||
padding-left: calc(1.75rem + .75rem + .75rem); | |||
} | |||
summary:before { | |||
position: absolute; | |||
top: 50%; | |||
transform: translateY(-50%); | |||
left: .75rem; | |||
content: "↓"; | |||
width: 1.75rem; | |||
height: 1.75rem; | |||
background-color: #000; | |||
color: #FFF; | |||
display: inline-flex; | |||
justify-content: center; | |||
align-items: center; | |||
flex-shrink: 0; | |||
} | |||
details[open] summary { | |||
background-color: #eee; | |||
} | |||
details[open] summary:before { | |||
content: "↑"; | |||
} | |||
summary:hover { | |||
background-color: #eee; | |||
} | } | ||
</style> | </style> | ||
<details open | <details open> | ||
<summary | <summary> | ||
How do you create an accordion? | How do you create an accordion? | ||
</summary> | </summary> | ||