How to create expandable / collapsible DIV sections of your blog without CSS or Javascript (only with HTML)1 min read

Here's a simple way to make expandable and collapsible parts of your blog post without using custom CSS or Javascript.

Just two simple tags…

<details><summary>This part is clickable</summary>

1. Everything below it is hidden by default
2. Then when the visitor clicks the Summary
3. It reveals everything below it
4. You can include text, lists, images, etc.

</details>

Here it is in action:

This part is clickable

Everything below it is hidden by default Then when the visitor clicks the Summary It reveals everything below it You can include text, lists, images, etc.

And all the text within the <details> and <summary> tags are indexable by Google because they are not hidden from the page.

These tags are supported by all current browsers.

You can customize the look of your tags with CSS, but it's not necessary for the functionality.There are a lot of applicable uses for these tags.

Here's more info + examples:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary

http://jsfiddle.net/thurstanh/emtAm/2/

Update: It's weird that the mouse doesn't change when you hover over the clickable element like a normal hyperlink would. I learned that you have to edit the CSS style of the Summary.

Here are the cursor styles you can choose from: https://www.w3schools.com/cssref/tryit.asp?filename=trycss_cursor

You'll end up with code that looks something like this:

<details><summary style="cursor:pointer;outline: none;"><strong>+ What's the answer?</strong></summary>
This is the answer!
</details>

And the code functions like this:

+ What's the answer?

This is the answer!