Make an Animated Accordion Component purely in React and Tailwind CSS

welcome back everyone in this video we're going to build this accordion component from scratch we'll make it transition between open and close State the component will be completely customizable you can put anything as the trigger or the children and everything will be just react and in CSS so let's start building it let me quickly set up the component it will need the children current value an on chain Handler and the rest of the props pass these props to the list children are the accordion items will create in a minute first create a state for the selected accordion item so we can know which one should be open fire the own change Handler whenever the selection changes and to communicate this state to the items we'll need a context wrap the children with the context provider all that done let's move to the accordion item it'll take the content as children a unique ID or value for this item the trigger and the rest of the props X is the context values it's open when the selected value is the same as its value each item will appear separated with a bottom border the trigger will go inside a header and a shevone down icon at the end it should behave like a button to toggle the open and close State on click when you click and already opened accordion it should be closed which also means selected is n and no other accordion is open for its Styles make it Flex row justy space between the trigger and Chevron icons Center them vertically and some padding now for its actual content make it overflow why hidden since we don't want the content to overflow when its height is zero so when opened set the height to 100% otherwise zero if we didn't need the open and close transitions will be basically done here now let's see how it's done so far you can restrict its maximum width if you don't want it to span the whole width let me put together a few Demi accordians so it's working as expected all that's left is that transition first the sh drone should be rotated upwards next is the content height since we cannot transition to height 100% we need its exact height for that we'll need a reference for the content to get its offset height and apply transition all and that should be it I think the badding here needs some adjustments you can leave it transparent or provide a background color so there it is your own custom accordion component completely built from scratch leave a like if you found this help

Channel: Your Code Lab

Views: 1,906

Keywords: reactjs, tailwindcss, javascript, webdev, web development, coding, programming, react components

Id: dciqfn6vRxc

Length: 7min 0sec (420 seconds)

Published: Mon Jan 01 2024