Update Accordion

snippets/Accordion.md

@@ -3,43 +3,45 @@ title: Accordion
 tags: components,children,state,advanced
 ---
 
-Renders an accordion menu with multiple collapsible content components.
+Renders an accordion menu with multiple collapsible content elements.
 
-- Define an `AccordionItem` component, pass it to the `Accordion` and remove unnecessary nodes expect for `AccordionItem` by identifying the function's name in `children`.
-- Each `AccordionItem` component renders a `<button>` that is used to update the `Accordion` via the `handleClick` callback and the content of the component, passed down via `children`, while its appearance is determined by `isCollapsed` and based on `style`.
-- In the `Accordion` component, use the `React.useState()` hook to initialize the value of the `bindIndex` state variable to `defaultIndex`.
+- Define an `AccordionItem` component, that renders a `<button>` which is used to update the component and notify its parent via the `handleClick` callback.
+- Use the `isCollapsed` prop in `AccordionItem` to determine its appearance and set an appropriate `className`.
+- Define an `Accordion` component that uses the `useState()` hook to initialize the value of the `bindIndex` state variable to `defaultIndex`.
+- Filter `children` to remove unnecessary nodes expect for `AccordionItem` by identifying the function's name.
 - Use `Array.prototype.map()` on the collected nodes to render the individual collapsiple elements.
 - Define `changeItem`, which will be executed when clicking an `AccordionItem`'s `<button>`.
-  `changeItem` executes the passed callback, `onItemClick` and updates `bindIndex` based on the clicked element.
+- `changeItem` executes the passed callback, `onItemClick`, and updates `bindIndex` based on the clicked element.
+
+```css
+.accordion-item.collapsed {
+  display: none;
+}
+
+.accordion-item.expanded {
+  display: block;
+}
+
+.accordion-button {
+  display: block;
+  width: 100%;
+}
+```
 
 ```jsx
 const AccordionItem = ({ label, isCollapsed, handleClick, children }) => {
-  const style = {
-    collapsed: {
-      display: 'none'
-    },
-    expanded: {
-      display: 'block'
-    },
-    buttonStyle: {
-      display: 'block',
-      width: '100%'
-    }
-  };
-
   return (
-    <div>
-      <button style={style.buttonStyle} onClick={handleClick}>
+    <>
+      <button className="accordion-button" onClick={handleClick}>
         {label}
       </button>
       <div
-        className="collapse-content"
-        style={isCollapsed ? style.collapsed : style.expanded}
+        className={`accordion-item ${isCollapsed ? 'collapsed' : 'expanded'}`}
         aria-expanded={isCollapsed}
       >
         {children}
       </div>
-    </div>
+    </>
   );
 };
 
@@ -53,7 +55,7 @@ const Accordion = ({ defaultIndex, onItemClick, children }) => {
   const items = children.filter(item => item.type.name === 'AccordionItem');
 
   return (
-    <div className="wrapper">
+    <>
       {items.map(({ props }) => (
         <AccordionItem
           isCollapsed={bindIndex !== props.index}
@@ -62,7 +64,7 @@ const Accordion = ({ defaultIndex, onItemClick, children }) => {
           children={props.children}
         />
       ))}
-    </div>
+    </>
   );
 };
 ```