# Free Content Snippets

**URL:** <https://forum.ghost.org/t/free-content-snippets/19110>\
**Category:** Themes\
**Created:** [December 27, 2020, 9:43pm UTC](https://forum.ghost.org/t/free-content-snippets/19110 "2020-12-27T21:43:49Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![denvergeeks](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/denvergeeks/32/7401_2.png) [@denvergeeks](https://forum.ghost.org/u/denvergeeks)\
**Post date:** [December 27, 2020, 10:56pm UTC](https://forum.ghost.org/t/free-content-snippets/19110/2 "2020-12-27T22:56:13Z")

</div>

## Collapsible Content Accordion

### Demo:
  

> **Click Here to Open and Close this Accordion**
>
> ```
> This accordion defaults to closed...
> 
> ```

  

> **Click Here to Close and Open this Accordion**
>
> ```
> *This accordion defaults to open...
> 
> ```

* * *
  
**HOW-TO** :  
  
Any content in your post or page that you want to hide inside a collapsible accordion, put it in between these 2 blocks of HTML in the editor:  
  

**HTML Block 1…**

```auto
<details>
  <summary>Click Here to Open and Close this Accordion</summary>

```

\* To make the accordion open by default, add open to the above \<details\> tag like so…

```auto
<details open>

```

**[_Add your post or page content and any blocks in the editor, as usual, sandwiched right here, in between_]**  
  
  
**HTML Block 2…**

```auto
</details>

<style> /* some optional pretty styling */
            
details {
    width: 100%;
    background-color: #eee;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0 2px 5px #35353536;
}
            
summary {
    background: rgb(59,89,152,.5);
    color: #fff;
    padding: 0 0 0 15px;
    margin: -5px;
    cursor: pointer;
    border: .5px solid gray;
    border-radius: 5px;
    outline: none;
}

summary:focus, summary:hover {
background-color: rgb(0,172,237,.5);
}
            
</style>

```

### Result:
Your accordion should look like this:

 ![accordion-closed](https://us1.discourse-cdn.com/flex015/uploads/ghost2/original/2X/a/a40c7821bf74775e1190f86ef41562d264f78333.jpeg)

### Example:

Here is an example where I’m displaying my Table of Contents in an Accordion:

[https://ghost-o-matic.com/collapsible-toc/](https://ghost-o-matic.com/collapsible-toc/)

### Note:

You can put an unlimited number of accordions on any post/page.

You can also put simple Accordions like this anywhere else that displays HTML, since it is a standard, built-in HTML5 element…

> **[Quick Reminder that Details/Summary is the Easiest Way Ever to Make an...](https://css-tricks.com/quick-reminder-that-details-summary-is-the-easiest-way-ever-to-make-an-accordion/)**
>
> Gosh bless the  element. Toss some content inside it and you have an accessible expand-for-more interaction with just about zero work.

---

_[View the full topic](https://forum.ghost.org/t/free-content-snippets/19110)._