admin管理员组

文章数量:1401431

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:

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:

  • javascript
  • html
  • css
  • google-chrome
Share Improve this question edited Sep 10, 2020 at 16:14 DannyThunder asked Mar 13, 2015 at 12:48 DannyThunderDannyThunder 1,0031 gold badge13 silver badges29 bronze badges 3
  • 1 With CSS..doubtful but I think it would be poor UX. I would scroll down to the summary, click it and the box could open upwards and off the screen. – Paulie_D Commented Mar 13, 2015 at 12:57
  • @Paulie_D the UX is out of my decision :-( – DannyThunder Commented Mar 13, 2015 at 13:39
  • @Kroltan JavaScript. – DannyThunder Commented Mar 13, 2015 at 13:40
Add a ment  | 

2 Answers 2

Reset to default 5

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 ;)

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

本文标签： javascriptHTML details tag opening direction How to changeStack Overflow

版权声明：本文标题：javascript - HTML details tag opening direction? How to change? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744207612a2595264.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。