Collapse

Usage

Basic

                                                
                                                import React, { useState } from 'react';
                                                import { Button } from '@alma-oss/spirit-web-react';
                                                
                                                // ...
                                                
                                                const [isOpen, toggle] = useState<boolean>(true);
                                                
                                                <Button onClick={() => toggle(!isOpen)}>Collapse Trigger ({ isOpen ? 'Open' : 'Closed' })</Button>
                                                <Collapse isOpen={isOpen}>
                                                  ...
                                                </Collapse>

With Toggle From Hook

                                                
                                                import React, { useState } from 'react';
                                                import { Button, Collapse, useCollapse } from '@alma-oss/spirit-web-react';
                                                
                                                // ...
                                                
                                                const { isOpen, toggle } = useCollapse(false);
                                                
                                                <Button onClick={() => toggle(!isOpen)}>Collapse Trigger ({ isOpen ? 'Open' : 'Closed' })</Button>
                                                <Collapse isOpen={isOpen}>
                                                  ...
                                                </Collapse>

With Toggle Handler From Hook

                                                
                                                import React, { useState } from 'react';
                                                import { Button, Collapse, useCollapse } from '@alma-oss/spirit-web-react';
                                                
                                                // ...
                                                
                                                const { isOpen, toggleHandler } = useCollapse(false);
                                                
                                                <Button onClick={toggleHandler}>Collapse Trigger ({ isOpen ? 'Open' : 'Closed' })</Button>
                                                <Collapse isOpen={isOpen}>
                                                  ...
                                                </Collapse>

Responsive

                                                
                                                import React, { useState } from 'react';
                                                import { Button, Collapse } from '@alma-oss/spirit-web-react';
                                                
                                                // ...
                                                
                                                const [isOpen, toggle] = useState<boolean>(true);
                                                
                                                <Button hideFrom="tablet" onClick={() => toggle(!isOpen)}>
                                                  Collapse Trigger ({ isOpen ? 'Open' : 'Closed' })
                                                </Button>
                                                <Collapse isOpen={isOpen}>
                                                  ...
                                                </Collapse>

Inline Expanding

For inline text expansion (useful for "read more" functionality), use elementType="span". This ensures the expanded content appears inline with existing text rather than on a new line.

                                                
                                                import React, { useState } from 'react';
                                                import { Button, Collapse } from '@alma-oss/spirit-web-react';
                                                
                                                const [isOpen, toggle] = useState < boolean > false;
                                                
                                                <p>
                                                  This is some text that continues inline when expanded.{' '}
                                                  <Button onClick={() => toggle(!isOpen)}>{isOpen ? 'less' : '… more'}</Button>
                                                  <Collapse id="inline-collapse" isOpen={isOpen} elementType="span">
                                                    This additional content will appear inline with the existing text when expanded.
                                                  </Collapse>
                                                </p>;

Important Notes:

• Use elementType="span" for inline behavior (currently the only supported inline element)
• The collapse element is removed from the DOM when open to prevent content duplication

API

On top of the API options, the components accept additional attributes. If you need more control over the styling of a component, you can use style props and escape hatches.

Uncontrolled Collapse

Basic

                                                
                                                import React, { useState } from 'react';
                                                import { Button, UncontrolledCollapse } from '@alma-oss/spirit-web-react';
                                                
                                                // ...
                                                
                                                <UncontrolledCollapse
                                                  id="collapse-example"
                                                  renderTrigger={({ isOpen, ...restProps }) => (
                                                    <Button {...restProps}>Collapse Trigger ({isOpen ? 'Open' : 'Closed'})</Button>
                                                  )}
                                                >
                                                  ...
                                                </UncontrolledCollapse>;

                                                
                                                import React, { useState } from 'react';
                                                import { Button, UncontrolledCollapse } from '@alma-oss/spirit-web-react';
                                                
                                                // ...
                                                
                                                <UncontrolledCollapse
                                                  id="collapse-example"
                                                  renderTrigger={({ isOpen, ...restProps }) => (
                                                    <Button {...restProps}>Collapse Trigger ({isOpen ? 'Open' : 'Closed'})</Button>
                                                  )}
                                                  hideOnCollapse
                                                >
                                                  ...
                                                </UncontrolledCollapse>;

API

On top of the API options, the components accept additional attributes. If you need more control over the styling of a component, you can use style props and escape hatches.

⚠️ DEPRECATION NOTICE

hideOnCollapse property will be replaced in the next major version. Please use isDisposable instead.

We are providing a codemod to assist with this change.

What are deprecations?

Render Toggle API