Creating a Details Element That Opens But Never Closes

accordion.jpg
Creating a Details Element That Opens But Never Closes 3

The <details> and <summary> elements in HTML are useful for making content toggles for bits of text. By default, you see the <summary> element with a toggle triangle (▶︎) next to it. Click that to expand the rest of the text inside the <details> element.

But let’s say you want to be able to click it open and that’s that. Interactivity over. I saw this used in one of those “Read more” article designs, where you click that “Read more” button and the article expands, but there is no going back.

I’ll preface this by saying that I’m not sure that this is a great idea in general. Removing controls just doesn’t feel great, nor does slapping too much important content within a <details> element. But, hey, the web is a big place and you never know what you might need. The fact that this can be done in a few lines of HTML/CSS is compelling and might reduce the need for heavier solutions.

The main trick here is to hide the summary when details is open.

details[open] summary {
  display: none;
}

That’s it really.


This post was originally posted here

Check out our Starter Sites built with #ToolWeLove including Toolset, Elementor Pro, and Astra Pro.

 

Share this page
Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on email
How to Choose WordPress Hosting

Pixallus WordPress Hosting. Simplified. Enjoy blazing fast WordPress website loading speeds and 99.9% uptime. Whether you’re a freelancer, small business, or a large organization, we

Read More »
Vue 3

It’s out! Congrats to the Vue team for getting it done, I know it was a massive effort and a long time coming. All new

Read More »
Troubleshooting High Server Loads

One of the more ambiguous, but oft-seen, errors resulting in support tickets is related to high server loads. While high server load errors are virtually never caused by the cPanel

Read More »