# elementor/3.8.0-beta1/app/assets/js/molecules/collapse.js

Elementor Website Builder – more than just a page builder, version 3.8.0-beta1. 55 lines.

- Page: https://pluginprobe.com/plugins/elementor/3.8.0-beta1/code/app/assets/js/molecules/collapse.js
- Raw: https://pluginprobe.com/plugins/elementor/3.8.0-beta1/raw/app/assets/js/molecules/collapse.js
- Modified: 2022-09-19T16:26:20+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/elementor/3.8.0-beta1/code/app/assets/js/molecules/collapse.js#L10-L20`.

```javascript
import { useState, useEffect } from 'react';
import { arrayToClassName } from 'elementor-app/utils/utils.js';

import { CollapseContext } from './collapse-context';

import CollapseToggle from './collapse-toggle';
import CollapseContent from './collapse-content';

import './collapse.scss';

export default function Collapse( props ) {
	const [ isOpened, setIsOpened ] = useState( props.isOpened ),
		classNameBase = 'e-app-collapse',
		classes = [ classNameBase, props.className, { [ classNameBase + '--opened' ]: isOpened } ],
		toggle = () => setIsOpened( ( prevState ) => ! prevState );

	useEffect( () => {
		if ( props.isOpened !== isOpened ) {
			setIsOpened( props.isOpened );
		}
	}, [ props.isOpened ] );

	useEffect( () => {
		if ( props.onChange ) {
			props.onChange( isOpened );
		}
	}, [ isOpened ] );

	return (
		<CollapseContext.Provider value={ { toggle } }>
			<div className={ arrayToClassName( classes ) }>
				{ props.children }
			</div>
		</CollapseContext.Provider>
	);
}

Collapse.propTypes = {
	className: PropTypes.string,
	isOpened: PropTypes.bool,
	onChange: PropTypes.func,
	children: PropTypes.oneOfType( [
		PropTypes.node,
		PropTypes.arrayOf( PropTypes.node ),
	] ),
};

Collapse.defaultProps = {
	className: '',
	isOpened: false,
};

Collapse.Toggle = CollapseToggle;
Collapse.Content = CollapseContent;

```