Collapsible content
Renders a component with collapsible content.
- Use the
useState()
hook to create theisCollapsed
state variable. Give it an initial value ofcollapsed
. - Use the
<button>
to change the component'sisCollapsed
state and the content of the component, passed down viachildren
. - Use
isCollapsed
to determine the appearance of the content and apply the appropriateclassName
. - Update the value of the
aria-expanded
attribute based onisCollapsed
to make the component accessible.
.collapse-button { display: block; width: 100%; } .collapse-content.collapsed { display: none; } .collapsed-content.expanded { display: block; }
const Collapse = ({ collapsed, children }) => { const [isCollapsed, setIsCollapsed] = React.useState(collapsed); return ( <> <button className="collapse-button" onClick={() => setIsCollapsed(!isCollapsed)} > {isCollapsed ? 'Show' : 'Hide'} content </button> <div className={`collapse-content ${isCollapsed ? 'collapsed' : 'expanded'}`} aria-expanded={isCollapsed} > {children} </div> </> ); }; ReactDOM.createRoot(document.getElementById('root')).render( <Collapse> <h1>This is a collapse</h1> <p>Hello world!</p> </Collapse> );