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

Developer help
1

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?

2

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:

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?

3

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?

4

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

<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.