How can I get a footnote dropdown to expand page?

I am trying to create a dropdown for footnotes in my articles similar to what James Clear has done in this post: https://jamesclear.com/stay-on-the-bus

However, I’m running into two issues that I cannot seem to fix:

  1. I cannot get the dropdown text to extend to the same length as my text. My solution was to expand the width of the dropdown, but that moves the arrow really far to the right. Does you know how to get it to align to the text box above while keeping the arrow close to the title?

  2. When the dropdown is expanded right now it covers the newsletter subscribe box. How can I get it to extend the page instead of overlay what’s below the text?

The only article that has footnotes at the moment is the Bird in Hand post. But I will eventually be adding them into the rest of the articles on my site.


Here is my site Read-Only: https://preview.webflow.com/preview/noah-zender?utm_medium=preview_link&utm_source=designer&utm_content=noah-zender&preview=c938c1fe2aeb0fe38ac73180ade79471&pageId=64aa135802bee661d502fc5c&itemId=64b4a36a8dda973fdbaa393e&workflow=preview

Hey Noah,

Dropdowns are typically a navigation mechanic and are designed to overlay the page.
I think what you want is an accordion.

If you search the forum or component libraries, you’ll find a lot of options, but they’re easy to build with interactions.

Thank you! I added in a new accordion component. How can I remove or change the color of the background hover on it without breaking the interaction? (Sorry I’m new to webflow)