Adding notion-like "toggles" inside rich-text element

Hi, so I’m building this blog site and I’m wondering is it possible to create notion-like “toggles” inside rich-text element? It would be useful for me to add ‘extra elaboration’ inside my blog posts.

Here’s an example of the toggles:

Of course we can create toggle/accordion drop down in static pages, but would be great if there’s a way to do this (probably with custom code) inside rich text element.

Thank you!

You could, with scripting. But it will be some work. At the end it’s all HTML, so you can modify it with script. In this case however you have a bit of a challenge in your structure.

Let’s say you decide that an <h6> in your rich text indicates a toggle.

You content might be;

<h6>World War I, ...</h6>
<p>lskajsdlafjasdlkf</p>
<h6>What started the war?</h6>
<p>lskajsdlafjasdlkf</p>
<p>lskajsdlafjasdlkf</p>
<h6>When did World War 1 end?</h6>
<p>lskajsdlafjasdlkf</p>
<ul><li>ajsdlkfjlasdkf</li></ul>
<img>

To make toggles possible your first task will be to restructure it by finding the content between any </h6> and the next <h6> or the end of the rich text content.

You’d reshape it something like;

<h6>World War I, ...</h6>
<div>
  <p>lskajsdlafjasdlkf</p>
</div>
<h6>What started the war?</h6>
<div>
  <p>lskajsdlafjasdlkf</p>
  <p>lskajsdlafjasdlkf</p>
</div>
<h6>When did World War 1 end?</h6>
<div>
  <p>lskajsdlafjasdlkf</p>
  <ul><li>ajsdlkfjlasdkf</li></ul>
  <img>
</div>

And then attach click events to your h6’s, add your caret’s, collapse your divs, etc.
I’ve not seen any pre-made Webflow libs that do this for you, but you might get lucky. Otherwise you may want to hire a dev to build a solution for you.

I’ll add that, I think you should be able to do this with class-attached interactions if you plan well. Which is pretty cool. But you’ll need to rebind Webflow’s interactions after your script reshapes your rich text HTML. I’ve seen a script statement here somewhere in the forums that rebinds your IX2 events.