Please add some visual indication around exposed-details

The hide details feature is great. But:

Expand this

And the hidden text will show below

Especially with multiple paragraphs

You can’t tell where the details ended

If there are un-hidden paragraphs below…

I suggest some visual mark, maybe something similar to a quoteblock, maybe at least a horizontal line. Something to indicate the end of the exposed-details when it is expanded.

9 Likes

Perhaps this could be done with CSS? :thinking:

4 Likes

Yeah CSS works, those details are wrapped with <details> and the summary with <summary> so you can add something fancy pretty quick:

details {
   border: 1px solid var(--primary-low);
   p {
     padding: 0 1em;
   }
   summary {
     background: var(--primary-low);
     padding: 1em; 
   }
}

9 Likes

Is this something we should put in core? I think having some visual indicator is very useful!

5 Likes

I don’t have a strong feeling either way, but lean towards doing less by default… @wolftune what’s your case for distinguishing it from other content? I haven’t encountered a situation where I care about distinguishing the summarized content after expansion.

1 Like

I simply find it disorienting to open a details thing and then not know where it stops when I’m reading. Seems appropriate to core IMO.

1 Like

Yes please.

Although @awesomerobot’s hack is very good and I’m tempted to use it, I think it adds some classy style and organization for Core, being that it can make big topics (that normally need to use the “Details” feature to not be massive) and be a nice little box with the contents within and clear indication of where it ends if it is too much info.

1 Like

No, this doesn’t belong in core. If you need it, add the CSS.

1 Like

Can I ask the reasoning? Just asking so that I can understand better when to suggest it or not, if it makes sense with the vision, etc.