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>

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/