# Hide details button style
**URL:** https://meta.discourse.org/t/hide-details-button-style/286777
**Category:** Theme component
**Tags:** hide-details
**Created:** [November 27, 2023, 10:13pm UTC](https://meta.discourse.org/t/hide-details-button-style/286777 "2023-11-27T22:13:26Z")
**Posts on this page:** 3
**Page:** 1
### Author:  [@Ger](https://meta.discourse.org/u/Ger)
#### Post date: [November 27, 2023, 10:13pm UTC](https://meta.discourse.org/t/hide-details-button-style/286777/1 "2023-11-27T22:13:27Z")
| | | |
| --- | --- | --- |
| ℹ | **Summary** | Styles `[details]` to make it more obvious they are clickable |
| 👓 | **Preview** | [via Theme Creator](https://discourse.theme-creator.io/theme/Ger/hide-details-button-style) |
| 🛠 | **Repository** | [Ger / Component - Better Hide Details · GitLab](https://gitlab.com/Wrimo/component-better-hide-details) |
| ❓ | **Install Guide** | [How to install a theme or theme component](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682) |
| 📖 | **New to Discourse Themes?** | [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) |
Install this theme component
### Description
This component makes it more apparent that the headline of `[details]` functions like a button. Nested details have more intense colour for every level and it is clear where each element ends.
### Screenshots
**With the Hide Details Button Style theme-component**
**Without the Hide Details Button Style theme-component**
This is the same without the component being active on a regular install:
> **Source used in the example**
>
> ```css
> [details=Title line]
> Content
> [details=Closed nested title]
> Nested Content
> [/details]
> [details=Nested title]
> More nested Content
> [/details]
> [/details]
> [details=Second details]
> More Content
> [/details]
>
> Text
>
> [details=Additional details]
> Even more Content
> [/details]
>
> ```
(↑ Regarding the Discourse meta formatting of hide details, I am not entirely sure what affects theming on this install or if that might be an upcoming feature.)
### Features
- Makes clear where a `[details]` starts/ends and that it can be clicked
- The currently selected `[details]` is visually highlighted on TAB.
- Several edge cases such as nesting, multiple successive `[details]` are handled
- Appears live in editor preview
- Basic display in the “Recent replies” etc. streams
- Uses the Tertiary colour of the colour scheme
- Separate arrow for multi-line summary titles
### Remarks
- I have tested it with all themes of the Discourse instance I am a participant of and it worked there
- It partially uses more recent CSS features, so colors might not work correctly on old browsers
- If Discourse changes how `[details]` are structured or styled in the future, this theme-component will probably break.
---
### Author:  [@Moin](https://meta.discourse.org/u/Moin)
#### Post date: [November 27, 2023, 10:16pm UTC](https://meta.discourse.org/t/hide-details-button-style/286777/2 "2023-11-27T22:16:48Z")
> [@Ger](#):
>
> Regarding the Discourse meta formatting of hide details, I am not entirely sure what affects theming on this install or if that might be an upcoming feature
It is one of the [Design experiments](https://meta.discourse.org/t/discourse-design-team-experimentation-topic/285362)
You can read more about it in [Details in topic styling changes - Feedback](https://meta.discourse.org/t/details-in-topic-styling-changes-feedback/285364)
---
### Author:  [@Dotila\_Li](https://meta.discourse.org/u/Dotila_Li)
#### Post date: [December 1, 2023, 7:45am UTC](https://meta.discourse.org/t/hide-details-button-style/286777/4 "2023-12-01T07:45:02Z")
💗 It would be better if there’s setting to backgroud color.