Tailwind CSS Accordion

An accordion with Alpine JS and Tailwind CSS

Share

/r/n \r\n <script defer src=https://www.creative-tim.com/"https:////cdn.jsdelivr.net//npm//alpinejs@3.x.x//dist//cdn.min.js/">/r/n/r/n/r/n <div class=\"p-8 min-h-screen w-full flex items-center justify-center\">\r\n \r\n <div\r\n class=\"w-full divide-y divide-slate-300 overflow-hidden rounded-xl border border-slate-300 bg-slate-100\/40 text-slate-700 dark:divide-slate-700 dark:border-slate-700 dark:bg-slate-800\/50 dark:text-slate-300\">\r\n <div x-data=\"{ isExpanded: false }\" class=\"divide-y divide-slate-300 dark:divide-slate-700\">\r\n <button id=\"controlsAccordionItemOne\" type=\"button\"\r\n class=\"flex w-full items-center justify-between gap-4 bg-slate-100 p-4 text-left underline-offset-2 hover:bg-slate-100\/75 focus-visible:bg-slate-100\/75 focus-visible:underline focus-visible:outline-none dark:bg-slate-800 dark:hover:bg-slate-800\/75 dark:focus-visible:bg-slate-800\/75\"\r\n aria-controls=\"accordionItemOne\" @click=\"isExpanded = ! isExpanded\"\r\n :class=\"isExpanded ? 'text-onSurfaceStrong dark:text-onSurfaceDarkStrong font-bold' : 'text-onSurface dark:text-onSurfaceDark font-medium'\"\r\n :aria-expanded=\"isExpanded ? 'true' : 'false'\">\r\n What browsers are supported?\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2\"\r\n stroke=\"currentColor\" class=\"size-5 shrink-0 transition\" aria-hidden=\"true\"\r\n :class=\"isExpanded ? 'rotate-180' : ''\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M19.5 8.25l-7.5 7.5-7.5-7.5\" \/>\r\n <\/svg>\r\n <\/button>\r\n <div x-cloak x-show=\"isExpanded\" id=\"accordionItemOne\" role=\"region\"\r\n aria-labelledby=\"controlsAccordionItemOne\" x-collapse>\r\n <div class=\"p-4 text-sm sm:text-base text-pretty\">\r\n Our website is optimized for the latest versions of Chrome, Firefox, Safari, and Edge. Check our\r\n <a href=https://www.creative-tim.com/"#\"\r\n class=\"underline underline-offset-2 text-blue-700 dark:text-blue-600\">documentation<\/a>\r\n for additional information.\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div x-data=\"{ isExpanded: false }\" class=\"divide-y divide-slate-300 dark:divide-slate-700\">\r\n <button id=\"controlsAccordionItemTwo\" type=\"button\"\r\n class=\"flex w-full items-center justify-between gap-4 bg-slate-100 p-4 text-left underline-offset-2 hover:bg-slate-100\/75 focus-visible:bg-slate-100\/75 focus-visible:underline focus-visible:outline-none dark:bg-slate-800 dark:hover:bg-slate-800\/75 dark:focus-visible:bg-slate-800\/75\"\r\n aria-controls=\"accordionItemTwo\" @click=\"isExpanded = ! isExpanded\"\r\n :class=\"isExpanded ? 'text-onSurfaceStrong dark:text-onSurfaceDarkStrong font-bold' : 'text-onSurface dark:text-onSurfaceDark font-medium'\"\r\n :aria-expanded=\"isExpanded ? 'true' : 'false'\">\r\n How can I contact customer support?\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2\"\r\n stroke=\"currentColor\" class=\"size-5 shrink-0 transition\" aria-hidden=\"true\"\r\n :class=\"isExpanded ? 'rotate-180' : ''\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M19.5 8.25l-7.5 7.5-7.5-7.5\" \/>\r\n <\/svg>\r\n <\/button>\r\n <div x-cloak x-show=\"isExpanded\" id=\"accordionItemTwo\" role=\"region\"\r\n aria-labelledby=\"controlsAccordionItemTwo\" x-collapse>\r\n <div class=\"p-4 text-sm sm:text-base text-pretty\">\r\n Reach out to our dedicated support team via email at <a href=https://www.creative-tim.com/"#\"\r\n class=\"underline underline-offset-2 text-blue-700 dark:text-blue-600\">support@example.com<\/a>\r\n or\r\n call our toll-free number at 1-800-123-4567 during business hours.\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div x-data=\"{ isExpanded: false }\" class=\"divide-y divide-slate-300 dark:divide-slate-700\">\r\n <button id=\"controlsAccordionItemThree\" type=\"button\"\r\n class=\"flex w-full items-center justify-between gap-4 bg-slate-100 p-4 text-left underline-offset-2 hover:bg-slate-100\/75 focus-visible:bg-slate-100\/75 focus-visible:underline focus-visible:outline-none dark:bg-slate-800 dark:hover:bg-slate-800\/75 dark:focus-visible:bg-slate-800\/75\"\r\n aria-controls=\"accordionItemThree\" @click=\"isExpanded = ! isExpanded\"\r\n :class=\"isExpanded ? 'text-onSurfaceStrong dark:text-onSurfaceDarkStrong font-bold' : 'text-onSurface dark:text-onSurfaceDark font-medium'\"\r\n :aria-expanded=\"isExpanded ? 'true' : 'false'\">\r\n What is the refund policy?\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2\"\r\n stroke=\"currentColor\" class=\"size-5 shrink-0 transition\" aria-hidden=\"true\"\r\n :class=\"isExpanded ? 'rotate-180' : ''\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M19.5 8.25l-7.5 7.5-7.5-7.5\" \/>\r\n <\/svg>\r\n <\/button>\r\n <div x-cloak x-show=\"isExpanded\" id=\"accordionItemThree\" role=\"region\"\r\n aria-labelledby=\"controlsAccordionItemThree\" x-collapse>\r\n <div class=\"p-4 text-sm sm:text-base text-pretty\">\r\n Please refer to our <a href=https://www.creative-tim.com/"#\"\r\n class=\"underline underline-offset-2 text-blue-700 dark:text-blue-600\">refund policy page<\/a>\r\n on\r\n the website for detailed information regarding eligibility, timeframes, and the process for\r\n requesting a refund.\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <\/div>\r\n\r\n\r\n \r\n <div class=\"fixed bottom-0 inset-x-0 p-4 bg-slate-200 text-black\">\r\n <p class=\"text-sm\"><span class=\"text-lg\">\ud83d\udc27<\/span> Visit <a href=https://www.creative-tim.com/"https:////www.penguinui.com///"/r/n class=\"font-bold underline underline-offset-2\" target=\"_blank\">Peng<span\r\n class=\"text-blue-600\">ui<\/span>n UI<\/a> to view this component in different theme styles and to\r\n discover a wide range of other components.<\/p>\r\n <\/div>\r\n ","author_type":"App\\User","author_id":4717,"collection_id":null,"fork_id":null,"votes":1,"score":"4.0","visits":1877,"popularity":69,"slug":"accordion-5","approved":1,"created_at":"2024-03-22T00:00:00.000000Z","updated_at":"2024-09-19T02:26:08.000000Z","downloads":23,"code_views":824,"center":false,"notified":0,"premium":0,"tailwind_config":null,"type":"component","css":"https:\/\/cdn.tailwindcss.com","should_tweet":0,"media":[{"id":11837,"model_type":"App\\Component","model_id":6532,"collection_name":"preview","name":"temp51296","file_name":"temp51296.png","mime_type":"image\/png","disk":"public","size":80834,"manipulations":[],"custom_properties":[],"responsive_images":{"media_library_original":{"urls":["temp51296___media_library_original_1280_957.png","temp51296___media_library_original_1070_800.png","temp51296___media_library_original_895_669.png","temp51296___media_library_original_749_560.png","temp51296___media_library_original_627_469.png","temp51296___media_library_original_524_392.png"],"base64svg":"data:image\/svg+xml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHg9IjAiCiB5PSIwIiB2aWV3Qm94PSIwIDAgMTI4MCA5NTciPgoJPGltYWdlIHdpZHRoPSIxMjgwIiBoZWlnaHQ9Ijk1NyIgeGxpbms6aHJlZj0iZGF0YTppbWFnZS9qcGVnO2Jhc2U2NCwvOWovNEFBUVNrWkpSZ0FCQVFFQVlBQmdBQUQvL2dBN1ExSkZRVlJQVWpvZ1oyUXRhbkJsWnlCMk1TNHdJQ2gxYzJsdVp5QkpTa2NnU2xCRlJ5QjJPREFwTENCeGRXRnNhWFI1SUQwZ09UQUsvOXNBUXdBREFnSURBZ0lEQXdNREJBTURCQVVJQlFVRUJBVUtCd2NHQ0F3S0RBd0xDZ3NMRFE0U0VBME9FUTRMQ3hBV0VCRVRGQlVWRlF3UEZ4Z1dGQmdTRkJVVS85c0FRd0VEQkFRRkJBVUpCUVVKRkEwTERSUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVLzhBQUVRZ0FHQUFnQXdFUkFBSVJBUU1SQWYvRUFCOEFBQUVGQVFFQkFRRUJBQUFBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUUFBSUJBd01DQkFNRkJRUUVBQUFCZlFFQ0F3QUVFUVVTSVRGQkJoTlJZUWNpY1JReWdaR2hDQ05Dc2NFVlV0SHdKRE5pY29JSkNoWVhHQmthSlNZbktDa3FORFUyTnpnNU9rTkVSVVpIU0VsS1UxUlZWbGRZV1ZwalpHVm1aMmhwYW5OMGRYWjNlSGw2ZzRTRmhvZUlpWXFTazVTVmxwZVltWnFpbzZTbHBxZW9xYXF5czdTMXRyZTR1YnJDdzhURnhzZkl5Y3JTMDlUVjF0ZlkyZHJoNHVQazVlYm42T25xOGZMejlQWDI5L2o1K3YvRUFCOEJBQU1CQVFFQkFRRUJBUUVBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUkFBSUJBZ1FFQXdRSEJRUUVBQUVDZHdBQkFnTVJCQVVoTVFZU1FWRUhZWEVUSWpLQkNCUkNrYUd4d1Frak0xTHdGV0p5MFFvV0pEVGhKZkVYR0JrYUppY29LU28xTmpjNE9UcERSRVZHUjBoSlNsTlVWVlpYV0ZsYVkyUmxabWRvYVdwemRIVjJkM2g1ZW9LRGhJV0doNGlKaXBLVGxKV1dsNWlabXFLanBLV21wNmlwcXJLenRMVzJ0N2k1dXNMRHhNWEd4OGpKeXRMVDFOWFcxOWpaMnVMajVPWG01K2pwNnZMejlQWDI5L2o1K3YvYUFBd0RBUUFDRVFNUkFEOEEvU0EzYUE0elhwbm5qeE9EM29BWHpsOVJRQW9sQjZVQVlUNTg3dlFNdW9UdEhGT3doMjZrQStKdWFMZ05JaEo1eG1nQ1JYaUhGQUMrWkZRQktpSzNJRkFILzlrPSI+Cgk8L2ltYWdlPgo8L3N2Zz4="}},"order_column":2,"created_at":"2024-03-22T19:27:54.000000Z","updated_at":"2024-03-22T19:27:56.000000Z","conversions_disk":"public","uuid":"0a193a4f-e646-4674-a4b5-4ed534b7521f","generated_conversions":{"thumb":true,"ogimage":true},"original_url":"https:\/\/tailwindcomponents.com\/storage\/11837\/temp51296.png","preview_url":""}],"author":{"id":4717,"name":"Salar Houshvand","slug":"salar-houshvand","bio":"Creator of https:\/\/www.penguinui.com | \r\nNC, USA","avatar":"https:\/\/avatars.githubusercontent.com\/u\/48919847?v=4","header":"\/storage\/headers\/Dsi3uwiuqKuaxvqV4LAf1NL4VZTV4bbN65X6tEbq.jpg","created_at":"2021-08-22T02:12:19.000000Z","updated_at":"2024-03-22T18:52:58.000000Z"},"tags":[{"id":17,"name":{"en":"Accordions"},"description":"The Accordion component allows the user to see and hide sections of related content on a page. See below our collection of Accordion examples that you can add directly to your Tailwind UI project.","meta_description":"Visit our collection of Accordions that you can add directly to your Tailwind UI project to allow the user to see & hide sections of related content.","slug":{"en":"accordions"},"type":null,"order_column":16,"created_at":"2022-08-31T14:14:39.000000Z","updated_at":"2022-12-21T11:19:06.000000Z","pivot":{"taggable_type":"App\\Component","taggable_id":6532,"tag_id":17}}],"fork":null,"favorites":[{"id":4717,"name":"Salar Houshvand","slug":"salar-houshvand","bio":"Creator of https:\/\/www.penguinui.com | \r\nNC, USA","avatar":"https:\/\/avatars.githubusercontent.com\/u\/48919847?v=4","header":"\/storage\/headers\/Dsi3uwiuqKuaxvqV4LAf1NL4VZTV4bbN65X6tEbq.jpg","created_at":"2021-08-22T02:12:19.000000Z","updated_at":"2024-03-22T18:52:58.000000Z","pivot":{"component_id":6532,"user_id":4717}},{"id":19941,"name":"thanojwhy","slug":"thanojwhy","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/102891577?v=4","header":null,"created_at":"2024-07-24T07:20:57.000000Z","updated_at":"2024-07-24T07:20:57.000000Z","pivot":{"component_id":6532,"user_id":19941}}]}" :edit="false"> Full screen Preview

Salar Houshvand

4 components Profile On

Tailwind CSS Accordion

Community Rate

Related components