Expanding Accordions with HTML: Pictures?
-
Hi there,
So I’m trying to write an article with sections that can be expanded and collapsed (so an accordion). That seems doable based on what my preview shows after I use the code editor.
My issue is that this article is going to be a guide with pictures, and I want to include pictures from my media gallery in the expandable/collapsible section.
How would I go about doing this using HTML, please?
This is the code that’s worked for the basic expansion portion:<details> <summary>Text you see before expansion.</summary> <p>Text you see after expansion.</p> </details>
But I need a way to pull images from my media gallery to go under each tab.
I’d appreciate any advice. Thanks!
The blog I need help with is: (visible only to logged in users)
-
Hey there,
This may be possible by uploading the media, and then adding the HTML tag for an image embed using the image URL after uploading the media. That said, we have a block for this that makes it much easier! You can use the details block and even include other blocks in the “accordion” view:
The Details block is a block that allows you to include content hidden under a parent block with a text summary. This works like an accordion, with the text summary expanding to show nested content. Click here for an example of the Details block. This is hidden content. Add the Details Block To add the Details block, click on the + Block Inserter icon and search for Details block. CliHope this helps!
-
Thanks! I’m a mobile user so I didn’t even know that the Details block was a thing! Are there any plans to have it incorporated into the Jetpack app? 🙏🏻 Right now I have to manage the article with WordPress in my Safari browser as a workaround on mobile.
-
Hi there,
There isn’t any current discussion around adding the block to the Jetpack app, but I will be sure to relay this request to our developers internally.
Thank you!
- The topic ‘Expanding Accordions with HTML: Pictures?’ is closed to new replies.
WordPress.com Forums 