This is a feedback topic for details styling changes experiment.
An example of the details tag using BBCode:
abc
testing 123 123
123
An example of the details tag using HTML:
11 Likes
Using the HTML <details> seems to run the content into the summary:
This is an open details
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et ultricies ante. Fusce vel nisi tristique, tristique urna ut, dapibus lacus. Nulla dignissim quis ex a interdum. Integer nisl nisl, egestas in efficitur a, gravida vitae odio. Proin ut velit sit amet quam malesuada aliquet. Cras tempus in risus vel lacinia. Vivamus ut luctus nunc. Duis risus velit, molestie non lectus vitae, ornare gravida elit.This is a HTML details
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et ultricies ante. Fusce vel nisi tristique, tristique urna ut, dapibus lacus. Nulla dignissim quis ex a interdum. Integer nisl nisl, egestas in efficitur a, gravida vitae odio. Proin ut velit sit amet quam malesuada aliquet. Cras tempus in risus vel lacinia. Vivamus ut luctus nunc. Duis risus velit, molestie non lectus vitae, ornare gravida elit.Oh, I see. It’s not getting an automatic new line and I’ve not manually added one:
<details open>
<summary>
This is an open details
</summary>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et ultricies ante. Fusce vel nisi tristique, tristique urna ut, dapibus lacus. Nulla dignissim quis ex a interdum. Integer nisl nisl, egestas in efficitur a, gravida vitae odio. Proin ut velit sit amet quam malesuada aliquet. Cras tempus in risus vel lacinia. Vivamus ut luctus nunc. Duis risus velit, molestie non lectus vitae, ornare gravida elit.
</details>
Summary
This text will be hidden
5 Likes
Yep, you are correct. It looks like when adding this yourself, you didnt include p tags, while when adding it with the details insertion tool, it will do that.
Yours:
<details dir="ltr" open="">
<summary>
This is a HTML details
</summary>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et ultricies ante. Fusce vel nisi tristique, tristique urna ut, dapibus lacus. Nulla dignissim quis ex a interdum. Integer nisl nisl, egestas in efficitur a, gravida vitae odio. Proin ut velit sit amet quam malesuada aliquet. Cras tempus in risus vel lacinia. Vivamus ut luctus nunc. Duis risus velit, molestie non lectus vitae, ornare gravida elit.
</details>
Insertion Tools:
<details dir="ltr" open="">
<summary>Summary</summary>
<p>This text will be hidden</p>
</details>
The p tag added by the insertion tool keeps the text on a new line.
1 Like
Ah. You don’t need to add the <p> tags in the existing style. I suppose this new one is more <p>icky. 
2 Likes
Some initial feedback:
- I glazed over the new details element when I first encountered it. It just didn’t register as a
[details]. It might be “just because it’s new”, but… - It’s divorced from previous design and the default browser implementation – the chevron is after the summary instead of before, and the closed state points in the direction that previously (and by default) meant the opened state.
closed:
open:
- The button/summary element takes much more space (previously it was a semi-inline element)
vs 
- As seen above, previously the triangle/chevron was aligned with the text and now the “Summary” text isn’t, because of button’s padding (nothing is aligned with anything
)
- On mobile, after interacting with it, button’s background stays highlighted
- I would have voted for the border rather than the background option – I’d prefer that hiding some content did just that, without affecting contrast (relevant mostly in case of embedded images and emoji)
update:
- A reduced clickable area:
vs
7 Likes
That was sort of the point, to make it better means some diverging from the way it was, especially diverging from a browser default. We are now following the pattern of the “Replies” button at the bottom of posts with multiple replies.
Nice observation!
Another nice one, will look into this 
Im not sure that using a black/dark emoji on a dark/black background is something we could solve here…
This one is also a bit confusing, were you clicking somewhere other than the text before? Was it common for you to click here?
3 Likes
Yeah. I used this quite a lot, especially on mobile. 
The smaller area is harder to hit. I think it’s where my thumb is on the screen.
5 Likes
Yup! That’s one of the expectations of platform’s defaults: <details>, like checkboxes/radios and their <label>s, look and behave in a certain way. For example, I do the same on GH:
1 Reply
I don’t know if making it similar to the other thing is good actually 
1 Like
Hello! Please forgive me if my question is not entirely correct 
Would it be possible to add a function to show hidden content depending on the user group. For example, if the user is not registered or is not a member of this or that group, then he will not be able to view the details and a modal window will be displayed for him, where there will be instructions for gaining access (for example, register)?
I know about the existence of theme components/plugins that hide the entire topic or category. Simply, sometimes you want to give users the opportunity to read only primary information.
1 Like
It’s not something that’s been utilized that way, as typically a category is restricted to certain groups or users, and not details within a post in that category.
That being said, I’m sure this could be done in a plugin, but this topic wouldnt be ideal for that discussion.
1 Like
Minor nitpick, but this looks slightly off from the quote background color, this is the kind of “close but not quite” which can seem like a mistake. I think it should either match, or be more obviously different.
Other thoughts…
This is a manual quote
This is a partial quote, which can be expanded
Perhaps we co-opt this style slightly? Same padding, bg, and expansion… we’d have to at least drop the border to make it look less quote-like
Maybe a different style completely?
7 Likes
I am not alligned
Giving up on alignment here does bother me a bit:
This is most noticeable when you lead with a details block
4 Likes
Hello 
I just thinking out loud… Is the header necessary to show by default? I mean it is most of time using the default Summary and probably most of users don’t know that it can be unique and maybe it will be more natural if the text inside details will be truncated with ellipsis and the end will show ...show more if it’s collapsed and show less if expanded. For example the content truncated first line would be the header automatically. This can be a default view but users can add header separately if they want?
4 Likes
To be fair: the implementation is that clicking a label should set its radiobutton, not necessarily that clicking the entire empty row behind a label also works.
2 Likes
How would you feel about the hover state being permanent. Then it would be aligned as a “button” with the text below and above.
- The chevron is not aligned with text (it’s placed a bit too high)
vs 
(and it’s not the same chevron icon?
) - The composer menu uses a triangle to denote the details feature
- Adding to 2.
Placing the icon after the text makes it more difficult to recognize, especially when just quickly scanning a post
- Also adding to 2.
Regarding the direction that the icon is pointing toward: given that it acts as a toggle, wouldn’t it make sense to reverse it so it denotes current state rather than action/future state (this applies also to the “Replies” button) - It has no focus state when navigated to with tab
- The hover state is visible only when closed
5 Likes
Maybe … @awesomerobot thoughts?
Minor bug – When you open a detail, you scroll up until you load more posts (and a little more) ; once you come back, the detail content is not rendered (EDIT: or closed, but I would not expect to be closed here)
3 Likes
Yeah treating it like a button could work… almost like the existing HTML details tag, (plus a chevron)
Expand me
Here is some trimmed content... Here is some trimmed content... Here is some trimmed content... Here is some trimmed content... Here is some trimmed content... Here is some trimmed content... Here is some trimmed content...Also…
What if I use a paragraph as the summary content? This could be any length and linebreaks can be weird. Should this be limited? is there a usecase for a very very long summary text? Next line chevron:
here are the deets
3 Likes