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 |
||
| (5 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
| Zeile 1: | Zeile 1: | ||
<style> | <style> | ||
details div { | |||
border-left: 2px solid #000; | |||
border-right: 2px solid #000; | |||
border-bottom: 2px solid #000; | |||
padding: 1.5em; | |||
} | } | ||
background-color: | 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>How do you maen create an accordion?</summary> | ||
<div> | |||
Easy! As long as you don't have to support IE11 or older browsers you could use <code><details></code> and <code><summary></code> natively. | |||
</div> | |||
</details> | |||
<details> | |||
<summary> | <summary> | ||
What if I have to support IE11 or older browsers? | What if I have to support IE11 or older browsers? | ||
| Zeile 39: | Zeile 88: | ||
The <code><details></code> element encapsulates the <code><summary></code> element. The <code><summary></code> becomes the 'label' for the <code><details></code> and acts like a button. When clicked, the attribute <code>open</code> is added to the <code><details></code> element, making it display. You can therefore style the open and closed states seperately if you'd like. | The <code><details></code> element encapsulates the <code><summary></code> element. The <code><summary></code> becomes the 'label' for the <code><details></code> and acts like a button. When clicked, the attribute <code>open</code> is added to the <code><details></code> element, making it display. You can therefore style the open and closed states seperately if you'd like. | ||
</div> | </div> | ||
</details> | |||