Creating an HTML foldable / collapsible section on a page

[sunrays2993]

I have tried a few ways that I have found online for creating a foldable section for I can hide text unless someone wants to expand it, but I cannot get them to work.

They involve entering some new CSS, which I have put into the "Tools & Plugins > Custom CSS", then placing some HTML onto the page.

I am using the Editorial 2 theme.

Has anyone has experience whit this?

[AKickIndieNutz]

Hi, not quite sure what you are after but on my site I have an archive Page which just contains html and displays the Year and a subheading of Month hidden below that, when clicked on reveals each post for that month. The code is something like:

Year

Month Title

Actual Month

Post Title 1 Here
Post Title 2 Here

Not sure if it will be of help for what you are after but fingers crossed ;-)

[bjazmoore]

Are you trying to create an accordion?

[AKickIndieNutz]

`<p><span` style="color: #f7ecad;">Year</span></p>
<div class="post__toc">
	<details>
		<summary><span style="color: #e03e2d;">Month Title</span></summary>
		<summary><span style="color: #ffff00;">Actual Month</span></summary>
		<a href="#INTERNAL_LINK#/post/xxx" target="_blank" rel="noopener noreferrer">Post Title 1 Here</a><a> <br></a> <a href="#INTERNAL_LINK#/post/xxx" target="_blank" rel="noopener noreferrer">Post Title 2 Here</a><a> <br></a>`

[candidexmedia]

You're missing a closing </details> tag. Try this:

<details>
  <summary><span style="color: #e03e2d;">Month Title</span></summary>
  <summary><span style="color: #ffff00;">Actual Month</span></summary>
  <a href="#INTERNAL_LINK#/post/xxx" target="_blank" rel="noopener noreferrer">Post Title 1 Here</a><a> <br></a> <a href="#INTERNAL_LINK#/post/xxx" target="_blank" rel="noopener noreferrer">Post Title 2 Here</a><a> <br></a>
</details>

Also, you should only have one <summary> per <details> disclosure element: https://stackoverflow.com/questions/72065393/is-it-possible-to-include-more-than-one-summary-elements-inside-of-a-detail-elem

Having more than one doesn't make much sense, semantically.