Shared Webflow Library
Accordion Item

Accordion Item

Copy
{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"81bef391-a315-3143-72a6-86ce3119844e","type":"Block","tag":"div","classes":[],"children":["5411abb0-babf-2802-d734-bdda2eca6737","a40c4548-a476-fd3d-78e6-d2fb82825ed1"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"5411abb0-babf-2802-d734-bdda2eca6737","type":"HtmlEmbed","tag":"div","classes":["907cdd23-1e54-b5b8-ed99-e8bfde858ce0"],"children":[],"v":"<!-- \n\tPlease add this script at the Head code, this is a required script for the accordions to work as expected.\n-->\n\n<!-- <script defer src=\"https://cdn.jsdelivr.net/npm/@finsweet/attributes-accordion@1/accordion.js\"></script> -->","data":{"search":{"exclude":true},"embed":{"meta":{"html":"<!-- \n\tPlease add this script at the Head code, this is a required script for the accordions to work as expected.\n-->\n\n<!-- <script defer src=\"https://cdn.jsdelivr.net/npm/@finsweet/attributes-accordion@1/accordion.js\"></script> -->","div":false,"script":true,"compilable":false,"iframe":false},"type":"html"},"insideRTE":false,"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"visibility":{"conditions":[]}}},{"_id":"a40c4548-a476-fd3d-78e6-d2fb82825ed1","type":"Block","tag":"div","classes":["907cdd23-1e54-b5b8-ed99-e8bfde858ce1"],"children":["7fed8635-98e8-8fe2-016f-5995c9b68307","362b0b80-682f-0abd-5ab1-c120f73f9cc7"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[{"name":"fs-accordion-element","value":"accordion"}],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"7fed8635-98e8-8fe2-016f-5995c9b68307","type":"Block","tag":"div","classes":["907cdd23-1e54-b5b8-ed99-e8bfde858ce2"],"children":["e1ec3855-9c99-4a97-6ae4-def73d99fe4f","061ccd39-39f2-6a73-deb2-a5ba141b8367"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[{"name":"fs-accordion-element","value":"trigger"}],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"e1ec3855-9c99-4a97-6ae4-def73d99fe4f","type":"Block","tag":"div","classes":[],"children":["babd917e-287f-2384-eb1b-3be217dc1890"],"data":{"text":true,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"babd917e-287f-2384-eb1b-3be217dc1890","text":true,"v":"Lorem Ipsum"},{"_id":"061ccd39-39f2-6a73-deb2-a5ba141b8367","type":"Image","tag":"img","classes":["907cdd23-1e54-b5b8-ed99-e8bfde858ce3","907cdd23-1e54-b5b8-ed99-e8bfde858ce5"],"children":[],"data":{"img":{"id":"69821b120ebfde9be22f1829"},"srcsetDisabled":false,"attr":{"width":"auto","height":"auto","alt":"__wf_reserved_inherit","src":"https://cdn.prod.website-files.com/69821a12243070f763b5b268/69821b120ebfde9be22f1829_caret.png","loading":"lazy","id":""},"sizes":[{"max":36,"size":"100vw"},{"max":10000,"size":"36px"}],"devlink":{"runtimeProps":{},"slot":""},"displayName":"","xattr":[{"name":"fs-accordion-element","value":"arrow"}],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"362b0b80-682f-0abd-5ab1-c120f73f9cc7","type":"Block","tag":"div","classes":["907cdd23-1e54-b5b8-ed99-e8bfde858ce4"],"children":["f4ec3120-f703-df56-a2ee-80c5726399c0"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[{"name":"tabindex","value":"0"},{"name":"fs-accordion-element","value":"content"}],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"f4ec3120-f703-df56-a2ee-80c5726399c0","type":"Paragraph","tag":"p","classes":[],"children":["c802ec9f-df65-ffa1-2be8-2dfedaddeea3"],"data":{"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"c802ec9f-df65-ffa1-2be8-2dfedaddeea3","text":true,"v":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."}],"styles":[{"_id":"907cdd23-1e54-b5b8-ed99-e8bfde858ce0","fake":false,"type":"class","name":"hide","namespace":"","comb":"","styleLess":"display: none;","variants":{},"children":[],"origin":null,"selector":null},{"_id":"907cdd23-1e54-b5b8-ed99-e8bfde858ce1","fake":false,"type":"class","name":"base_faq-item","namespace":"","comb":"","styleLess":"display: flex; width: 100%; max-width: none; margin-bottom: 20px; flex-direction: column; align-items: flex-start;","variants":{"medium":{"styleLess":"margin-bottom: 16px;"}},"children":[],"createdBy":"5c32e19c1213425c470436be","origin":null,"selector":null},{"_id":"907cdd23-1e54-b5b8-ed99-e8bfde858ce2","fake":false,"type":"class","name":"base_faq-question","namespace":"","comb":"","styleLess":"display: flex; width: 100%; padding-top: 0px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; justify-content: space-between; align-items: center; font-weight: 800; cursor: pointer;","variants":{"main_hover":{"styleLess":"color: #2e2e2e;"},"small":{"styleLess":"display: flex; flex-wrap: nowrap;"}},"children":[],"createdBy":"5c32e19c1213425c470436be","origin":null,"selector":null},{"_id":"907cdd23-1e54-b5b8-ed99-e8bfde858ce3","fake":false,"type":"class","name":"base_faq-arrow","namespace":"","comb":"","styleLess":"width: 18px;","variants":{},"children":["907cdd23-1e54-b5b8-ed99-e8bfde858ce5"],"createdBy":"63b3acc54632663df85ff31b","origin":null,"selector":null},{"_id":"907cdd23-1e54-b5b8-ed99-e8bfde858ce5","fake":false,"type":"class","name":"is-active-accordion","namespace":"","comb":"&","styleLess":"transform: rotate(180deg); transition-property: transform; transition-duration: 200ms; transition-timing-function: ease;","variants":{},"children":[],"createdBy":"63b3acc54632663df85ff31b","origin":null,"selector":null},{"_id":"907cdd23-1e54-b5b8-ed99-e8bfde858ce4","fake":false,"type":"class","name":"base_faq-answer","namespace":"","comb":"","styleLess":"overflow: hidden; width: 100%; padding-right: 90px; border-bottom-style: none; border-bottom-width: 1px; border-bottom-color: hsla(0, 0.00%, 81.33%, 1.00); transition-property: max-height; transition-duration: 200ms; transition-timing-function: ease;","variants":{"small":{"styleLess":"padding-right: 20px;"},"main_lang(ar-KW)":{"styleLess":"padding-right: 0px; padding-left: 90px;"}},"children":[],"createdBy":"5c32e19c1213425c470436be","origin":null,"selector":null}],"assets":[{"cdnUrl":"https://cdn.prod.website-files.com/69821a12243070f763b5b268/69821b120ebfde9be22f1829_caret.png","siteId":"69821a12243070f763b5b268","width":36,"isHD":false,"height":22,"fileName":"69821b120ebfde9be22f1829_caret.png","createdOn":"2026-02-03T15:58:11.199Z","origFileName":"caret.png","fileHash":"c9aa096ac641b9817b2692d78517d72d","translationLoading":false,"variants":[{"s3Url":"https://s3.amazonaws.com/webflow-prod-assets/69821a12243070f763b5b268/69821b120ebfde9be22f1829_caret.png","origFileName":"caret.png","fileName":"69821b120ebfde9be22f1829_caret.png","format":"png","cdnUrl":"https://cdn.prod.website-files.com/69821a12243070f763b5b268/69821b120ebfde9be22f1829_caret.png","_id":"69821b120ebfde9be22f182a"}],"mimeType":"image/png","isFromWellKnownFolder":false,"s3Url":"https://s3.amazonaws.com/webflow-prod-assets/69821a12243070f763b5b268/69821b120ebfde9be22f1829_caret.png","thumbUrl":"https://cdn.prod.website-files.com/69821a12243070f763b5b268/69821b120ebfde9be22f1829_caret.png","_id":"69821b120ebfde9be22f1829","updatedOn":"2026-02-03T15:58:11.200Z","fileSize":276,"localizedSettings":{}}],"ix1":[],"ix2":{"interactions":[],"events":[],"actionLists":[]}},"meta":{"droppedLinks":0,"dynBindRemovedCount":0,"dynListBindRemovedCount":0,"paginationRemovedCount":0,"universalBindingsRemovedCount":0,"unlinkedSymbolCount":0,"codeComponentsRemovedCount":0}}

Accessibility Guide

Attribute Default Placed In Description
id accordionTriggerId accordion trigger Required. Unique identifier of the accordion trigger.
aria-expanded false accordion trigger Required. This is for the screen reader to announce the state of the accordion. Set to true when the accordion is open and set to false when closed.
aria-controls accodionWrapperId accordion trigger Required. Defines what the accordion content wrapper the trigger controls to improve accessibility.
tabindex 0 accordion trigger Optional. This is for keyboard accessibility, to allow focus on the trigger using tab key. Only added when the trigger used is not a button or a link. It is preferred that button or link element is used for the trigger.
id contentId accordion content Required. Unique identifier of the accordion content wrapper.
aria-labelledby accordionTriggerId accordion content Required. Provides an accessible label for the accordion content, referencing the accordion trigger label.
role region accordion content Required. This is to let the screen reader know that the content is part of the accordion.
tabindex 0 accordion content Required. This is for keyboard accessibility, to allow focus on the content using tab key.

Variants

No items found.