# betterdocs/4.9.5/react-src/admin/quick-setup/fields/Collapse.js

BetterDocs – AI Documentation, Knowledge Base, MCP Server, Docs, Wikis, FAQ & Chatbot, version 4.9.5. 41 lines.

- Page: https://pluginprobe.com/plugins/betterdocs/4.9.5/code/react-src/admin/quick-setup/fields/Collapse.js
- Raw: https://pluginprobe.com/plugins/betterdocs/4.9.5/raw/react-src/admin/quick-setup/fields/Collapse.js
- Modified: 2026-10-12T10:07:14+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/betterdocs/4.9.5/code/react-src/admin/quick-setup/fields/Collapse.js#L10-L20`.

```javascript
import classNames from "classnames";
import React, { useState } from "react";

const Collapse = (props) => {
    const [showSteps, setShowSteps] = useState(false);

    return (
        <div
            className={classNames(
                "wprf-control",
                "wprf-collapse",
                `wprf-${props.name}-collapse`,
                props?.classes
            )}
        >
            <div
                className={`wprf-collapse-header ${
                    showSteps ? "show" : "hide"
                }`}
            >
                <h4 className={`wprf-collapse-title`}>{props?.label}</h4>
                <h5
                    className="wprf-collapse-collapser"
                    onClick={() => setShowSteps(!showSteps)}
                >
                    {props?.collapse_title}
                </h5>
            </div>
            <div
                className={`wprf-collapse-body ${showSteps ? "show" : "hide"}`}
            >
                <span className="wprf-collapse-body-inner">
                    {props?.collapse_message}
                </span>
            </div>
        </div>
    );
};

export default Collapse;

```