# Trying to pass toggle card in HTML, failing/empty content

**URL:** <https://forum.ghost.org/t/trying-to-pass-toggle-card-in-html-failing-empty-content/34369>\
**Category:** Developer help\
**Created:** [November 24, 2022, 9:05am UTC](https://forum.ghost.org/t/trying-to-pass-toggle-card-in-html-failing-empty-content/34369 "2022-11-24T09:05:31Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![ghost2042392309](https://avatars.discourse-cdn.com/v4/letter/g/a6a055/32.png) [@ghost2042392309](https://forum.ghost.org/u/ghost2042392309)\
**Post date:** [November 24, 2022, 9:05am UTC](https://forum.ghost.org/t/trying-to-pass-toggle-card-in-html-failing-empty-content/34369/1 "2022-11-24T09:05:31Z")

</div>

Hi, we’re trying to pass the HTML for a standard ghost toggle card through the API. The html for the whole card works fine, aside from the div with class=‘kg-toggle-content’, for some reason the API is stripping the content out. We tried wrapping it in kg-card-begin: html but no difference. We tried plain content and content with html tags, still no luck.

Any advice?

---

<div class="post-metadata">

**Author:** ![Hannah](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/hannah/32/22_2.png) [@Hannah](https://forum.ghost.org/u/Hannah)\
**Post date:** [November 24, 2022, 2:45pm UTC](https://forum.ghost.org/t/trying-to-pass-toggle-card-in-html-failing-empty-content/34369/2 "2022-11-24T14:45:34Z")

</div>

Parsing from HTML into mobiledoc is quite a technical and tricky part of Ghost’s API. I can’t say for certain what’s going wrong (esp without seeing a full repro case), but I can direct you to the code that does the work:

> <https://github.com/TryGhost/Koenig/blob/main/packages/kg-parser-plugins/lib/parser-plugins.js#L95>

Our parser plugins are what read HTML and try to build mobiledoc out of it. This code will show you what classes and nodes are expected in order to build a toggle card.

If you can’t get it to work, there may be a bug in that code?

---

<div class="post-metadata">

**Author:** ![ghost2042392309](https://avatars.discourse-cdn.com/v4/letter/g/a6a055/32.png) [@ghost2042392309](https://forum.ghost.org/u/ghost2042392309)\
**Post date:** [November 24, 2022, 3:01pm UTC](https://forum.ghost.org/t/trying-to-pass-toggle-card-in-html-failing-empty-content/34369/3 "2022-11-24T15:01:24Z")

</div>

That’s really helpful thanks @Hannah

It’s curious that the code treats the heading and the content differently, as it actually makes sending the content unnecessarily complicated e.g if it read contentNode.innerHTML I think it’d probably work.

Problem is we’re using the Ghost hosted version so not sure much I can do aside from hack around it?

---

<div class="post-metadata">

**Author:** ![ghost2042392309](https://avatars.discourse-cdn.com/v4/letter/g/a6a055/32.png) [@ghost2042392309](https://forum.ghost.org/u/ghost2042392309)\
**Post date:** [November 24, 2022, 3:30pm UTC](https://forum.ghost.org/t/trying-to-pass-toggle-card-in-html-failing-empty-content/34369/4 "2022-11-24T15:30:19Z")

</div>

Just for more clarity, we’re literally taking the sample code:

```auto
<div class="kg-card kg-toggle-card" data-kg-toggle-state="close">
   <div class="kg-toggle-heading">
      <h4 class="kg-toggle-heading-text">Title goes here</h4>
      <button class="kg-toggle-card-icon">
         <svg id="Regular" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <path class="cls-1" d="M23.25,7.311,12.53,18.03a.749.749,0,0,1-1.06,0L.75,7.311"></path>
         </svg>
      </button>
   </div>
   <div class="kg-toggle-content">Sub-content goes here</div>
</div>

```

When we then pass that thorough, the text “Sub-content goes here” is removed and the div goes through with the correct classname, but with no content, so totally empty.