Just two simple tags…
<details><summary>This part is clickable</summary>
- 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.
Here it is in action:
This part is clickableEverything 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:
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: