# Advanced editing inside toggle cards?

**URL:** <https://forum.ghost.org/t/advanced-editing-inside-toggle-cards/32854>\
**Category:** Using Ghost\
**Created:** [September 18, 2022, 9:36pm UTC](https://forum.ghost.org/t/advanced-editing-inside-toggle-cards/32854 "2022-09-18T21:36:33Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![secondhandkid](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/secondhandkid/32/19078_2.png) [@secondhandkid](https://forum.ghost.org/u/secondhandkid)\
**Post date:** [September 18, 2022, 9:36pm UTC](https://forum.ghost.org/t/advanced-editing-inside-toggle-cards/32854/1 "2022-09-18T21:36:33Z")

</div>

Hello all!

I was wondering is usage of Markdown and embedding of images/html code is possible under Toggle card.

Or maybe somebody could point to any solution for toggle content apart from say Notion page embedding with iframe or something. (looks ugly).

Thanks in advance!

---

<div class="post-metadata">

**Author:** ![siddharta](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/siddharta/32/18401_2.png) [@siddharta](https://forum.ghost.org/u/siddharta)\
**Post date:** [October 9, 2022, 6:38am UTC](https://forum.ghost.org/t/advanced-editing-inside-toggle-cards/32854/2 "2022-10-09T06:38:35Z")

</div>

I have the same question. I would like to embed a code block within a toggle

---

<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:** [October 9, 2022, 3:56pm UTC](https://forum.ghost.org/t/advanced-editing-inside-toggle-cards/32854/3 "2022-10-09T15:56:57Z")

</div>

@secondhandkid and @siddharta if that is possible, I can’t find it easily either.

However, here is a method I shared a while back (before the Toggle Card was added to the editor) that enables you to put **anything** inside a toggle/ accordion… I use 2 Content Snippets (HTML Cards saved as Snippets) and then put whatever I want on the post/page in between the two…

> **[Make Anything Collapsible](https://ghost-o-matic.com/make-anything-collapsible/)**
>
> Use simple HTML tags to make any content on your Ghost site expand and collapse - accordion style!
> 
> 
> Fun and Easy! Click this accordion to reveal the hidden contents...
> 
> 
> Surprise! You can include in your accordions any and all content that you want...

> [@Free Content Snippets](https://forum.ghost.org/t/free-content-snippets/19110/2):
>
> 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…

Norbert @brightthemes also has a helpful tutorial on his site…

> **[Ghost Snippets: Accordions](https://brightthemes.com/blog/ghost-snippet-accordions)**
>
> How to add create custom stylish accordions in your Ghost theme. Add collapsible customizable pieces of content using our complete tutorial including HTML markup and CSS for styling.

---

<div class="post-metadata">

**Author:** ![Reseal4115](https://avatars.discourse-cdn.com/v4/letter/r/8491ac/32.png) [@Reseal4115](https://forum.ghost.org/u/Reseal4115)\
**Post date:** [December 30, 2022, 10:39am UTC](https://forum.ghost.org/t/advanced-editing-inside-toggle-cards/32854/4 "2022-12-30T10:39:34Z")

</div>

Same question here as well. Would be great to be able to add HTML to Toggle cards indeed. Any tips would be appreciated.

---

<div class="post-metadata">

**Author:** ![kutschkerf](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/kutschkerf/32/25440_2.png) [@kutschkerf](https://forum.ghost.org/u/kutschkerf)\
**Post date:** [July 22, 2023, 9:44am UTC](https://forum.ghost.org/t/advanced-editing-inside-toggle-cards/32854/5 "2023-07-22T09:44:53Z")

</div>

This would be especially appreciated for the mail card to format email only blocks.

---

<div class="post-metadata">

**Author:** ![BruceInLouisville](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/bruceinlouisville/32/40997_2.png) [@BruceInLouisville](https://forum.ghost.org/u/BruceInLouisville)\
**Post date:** [July 8, 2024, 2:33am UTC](https://forum.ghost.org/t/advanced-editing-inside-toggle-cards/32854/6 "2024-07-08T02:33:22Z")

</div>

An update on this technique:

I send out a weekly newsletter listing all the articles we’ve published that week. Since we are a news and commentary site, that list can run as many as 35 stories (or more). So, I’ve been looking for a way to make it more manageable.

I used the method above to make an accordion heading in an HTML card, then put my bookmark cards for that type of article, then the closing HTML card. Like so:

**First HTML Card**  
`<details><summary style="font-size:24px;"><b>Commentary</b></summary>`

**Story bookmarks**

**Second HTML Card**  
`</details><br/><br/>`

It worked great, and best of all it worked in the email newsletter as well.

Big thanks to Denver Geeks for the idea!
