Menu
I am trying to figure out a way to reverse the direction of an open <details> tag in HTML so that the summary is placed ABOVE instead of the default BELOW.
Is it possible to do it with CSS only? CSS+Javascript?
Here is a simple JSFiddle:
671
If you have a fixed size, you can set details as position: relative, set it's size for closed and open state and use top and bottom to adjust its children:
details { height: 20px; position: relative; width: 100%;}
details[open] { height: 40px;}
details span {position: absolute; top: 0;background-color: red;}
summary {background-color:blue; position: absolute; bottom: 0;}
details[open] ::-webkit-details-marker
{
transform: rotate(180deg);
}<body>
<p>Hello world!</p>
<details>
<span>Trying to open this upwards</span>
<summary>Test</summary>
</details>
</body>And do not forget the ::-webkit-details-marker to fix the arrow direction ;)
125
details {background-color:white; color:white;}
details[open] {background-color:red;}
summary {
background-color:blue;
position: relative;
top: calc(1em + 4px);
}
span {
position: relative;
top: calc(-1.2em + 4px);
}
demo
41
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
