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

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

- Page: https://pluginprobe.com/plugins/elementor/3.8.0-beta1/code/app/assets/js/molecules/collapse-toggle.js
- Raw: https://pluginprobe.com/plugins/elementor/3.8.0-beta1/raw/app/assets/js/molecules/collapse-toggle.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-toggle.js#L10-L20`.

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

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

export default function CollapseToggle( props ) {
	const context = useContext( CollapseContext ),
		style = { '--e-app-collapse-toggle-icon-spacing': pxToRem( props.iconSpacing ) },
		classNameBase = 'e-app-collapse-toggle',
		classes = [ classNameBase, { [ classNameBase + '--active' ]: props.active } ],
		attrs = {
			style,
			className: arrayToClassName( classes ),
		};

	if ( props.active ) {
		attrs.onClick = () => context.toggle();
	}

	return (
		<div { ...attrs }>
			{ props.children }

			{ props.active && props.showIcon && <i className="eicon-caret-down e-app-collapse-toggle__icon" /> }
		</div>
	);
}

CollapseToggle.propTypes = {
	className: PropTypes.string,
	iconSpacing: PropTypes.number,
	showIcon: PropTypes.bool,
	active: PropTypes.bool,
	children: PropTypes.any,
};

CollapseToggle.defaultProps = {
	className: '',
	iconSpacing: 20,
	showIcon: true,
	active: true,
};

```