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.
hello, yes, i followed those videos already. the issue is two things:
mobile:
see how the text runs over the animated arrow:
next, this accordion underlaps:
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:
What happened?
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.
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:
I click to go to it. but i donât know what to do
i donât think i have the layer issue anymore
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.
