Accordion design question

Hello,
using webflow for the first time. i made mockups of what i am trying to put together. What i need to created is accordions that slide in and and out displaying content. see screenshots below. I am having a hard time make the accordion look this way:

How do i accomplish that look. and this is what one accordion would look like when opened:

thank you for your time

Hi, here is a Webflow university video on how to create accordions.

If you prefer to clone an accordion that is already prebuilt and use it as a starting point you can use the below example.

https://webflow.com/website/Perfect-Accordion

1 Like

hello, yes, i followed those videos already. the issue is two things:

  1. the accordion does not respond as in the text in the accordion does not auto flow:
    desktop view

mobile:
Screen Shot 2021-05-14 at 8.08.31 AM

see how the text runs over the animated arrow:

next, this accordion underlaps:
Screen Shot 2021-05-14 at 8.10.10 AM

thank you for your time
jonathan

Hi. Please include your site’s Read-Only Share Link with your question.

https://university.webflow.com/lesson/share-your-project-and-invite-collaborators

A read-only link allows the community to view your project without making any edits to it and help diagnose your issue or provide feedback.

ahh. i see. i am learning. ok, this is a read only link:
https://preview.webflow.com/preview/meeting-coverage-web-version?utm_medium=preview_link&utm_source=designer&utm_content=meeting-coverage-web-version&preview=9a1b64bb53df561bf16a0fec638c3fec&mode=preview

In the hierarchy select “accordion toggle”.
Then under “more type options”
set “Breaking” to “Break Spaces”.

Layering issues are resolved using “z-index”.

For the overlapping issue set the z-index of the “accordion section” to “-1”.

You may also need to set the z-index of the dropdown link to a high number.

wow, yah, this helps.
menu top menu overlap issue fixed, thank you. however, the accordions no longer open and on phone it breaks:
Screen Shot 2021-05-17 at 8.36.50 AM

What happened?

https://preview.webflow.com/preview/meeting-coverage-web-version?utm_medium=preview_link&utm_source=designer&utm_content=meeting-coverage-web-version&preview=9a1b64bb53df561bf16a0fec638c3fec&pageId=609050cf72d0654a17155e63&mode=preview

i don’t understand these directions.

Select the dropdown and make the z-index number higher as described in the below video.

It is possible something has changed that has caused an issue with the accordion. If you had it working before and it broke I would try restoring to a backup of an earlier version and then testing to make sure it works after each change you make step by step. This would be a good way of troubleshooting exactly which change caused the issue.

well, seems the issue comes from from what you said to do.
If i select the accordion contatiner and change the z to 0, it works.

ok, the issue with the top navigation accordion appears to be fixed now.

this is the updated link:
https://preview.webflow.com/preview/meeting-coverage-web-version?utm_medium=preview_link&utm_source=designer&utm_content=meeting-coverage-web-version&preview=9a1b64bb53df561bf16a0fec638c3fec&pageId=609050cf72d0654a17155e63&mode=preview

it does not appear as the preview mode view matches what the link below displays:



The accordion runs off the page.

sorry. first time doing this. i am learning it to see if this product is something we can use at work.

I don’t know how to troubleshoot this when the preview displays one thing and those screenshots show another.

The z-index is something that may need a little trial and error between all the elements involved in a particular example to get it just right but that would be the way to resolve layering issues.

no problem. i understand.
ok, can you help me tackle this than:

i have this error:
Screen Shot 2021-05-17 at 11.41.29 AM
I click to go to it. but i don’t know what to do

link:
https://preview.webflow.com/preview/meeting-coverage-web-version?utm_medium=preview_link&utm_source=designer&utm_content=meeting-coverage-web-version&preview=9a1b64bb53df561bf16a0fec638c3fec&pageId=609050cf72d0654a17155e63&mode=preview

i don’t think i have the layer issue anymore

1 Like

It appears you are using a button for the AstraZenica image. I don’t think you need to use a button for this. It would be better to use an “image” element.

The audit is expecting descriptive text in the button - like “read more” etc. but your button only contains an image and no text and that is why the audit panel is displaying a warning.

If you click the “Learn more” text next to the warning it gives more information about the warning.