Free Content Snippets

Please add yours below to this collection of free, re-usable Content Snippets that you can copy and paste into your Ghost site. These are a useful built-in feature as explained here in the Ghost Docs:

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ā€¦

<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ā€¦

<details open>



[Add your post or page content and any blocks in the editor, as usual, sandwiched right here, in between]


HTML Block 2ā€¦

</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:

Example:

Here is an example where Iā€™m displaying my Table of Contents in an Accordion:

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ā€¦

1 Like

I think this thread is a great idea! Iā€™ve shared a snippet for images some time earlier in another forum post. May I chime in to share it here, if anyone else needs it:

To post images via url

How-to:

In your Ghost editor, create an HTML card. Then, add the following code piece:

<figure class="kg-card kg-image-card kg-card-hascaption">
    <img class="kg-image" src="https://image-link.com"
        alt="example-image" />
    <figcaption>
        Some caption | <a href="">Source</a>
    </figcaption>
</figure>

Customization:

If you donā€™t need the captions, you can remove the kg-card-hascaption class and <figcaption></figcaption> tags.

To add lazy loading, you can include loading=ā€œlazyā€ part in <img>.

Once youā€™re happy with the set-up, make it into a content snippet for re-use.

Iā€™m wondering how to add image urls for gallery. If anyone knows something, please share. Thanks!


HTML Block #1:

<figure class="kg-card kg-image-card kg-card-hascaption">

[Insert a normal Image Gallery Card, or anything else, here in betweenā€¦]


HTML Block #2:

    <figcaption>
        Some caption | <a href="">Source</a>
    </figcaption>
</figure>

To create a content snippet that you can re-use in many posts across your site, so that when you change the content in the one instance, it updates that same content in every instance across your site . . .

Free Snippets from Biron Themes. Thanks Norbert!

3 Likes

There is now a Card (called Toggle) for collapsible content built into the post/page editor. Thank you Team Ghost!

1 Like