Image Accordion Block allows user to add accordion with different images. In front-end, corresponding image will be displayed when user click on different accordion.
I have referred design and layout from Pixel 6a page. I really liked the layout and design so I have tried to create custom block for Block Editor.
I have developed this Gutenberg block for learning purpose. Such example(s) help developers to learn something new and different.
- Currently design is not responsive and haven't tested with different themes and layout.
- Minimum two and maximum four accordion can be added.
- User need to select images based on the number of accordion and main image.
- User can't map image to accordion. It is based on images selection sequence.
- https://store.google.com/us/product/pixel_6a?hl=en-US - I have tried to replicate accordion with images from this link.
- How TO - Collapsible/Accordion - I have used code snippet for collapsible accordion from this link.