{"componentChunkName":"component---src-templates-post-template-js","path":"/en-US/show/collapsible","result":{"data":{"current":{"frontmatter":{"title":"Collapsible","order":68,"brief":"The collapsible component is a container component used to put long sections of information under a block that can be expanded or collapsed.","icon":"doc-collapsible"},"fields":{"type":"show"},"tableOfContents":{"items":[{"url":"#when-to-use","title":"When to use"},{"url":"#demos","title":"Demos","items":[{"url":"#how-to-import","title":"How to import"},{"url":"#basic-usage","title":"Basic Usage"},{"url":"#custom-animation-duration","title":"Custom Animation Duration"},{"url":"#nested-use","title":"Nested use"},{"url":"#custom-collapseheight","title":"Custom CollapseHeight"}]},{"url":"#api-reference","title":"API reference"},{"url":"#accessibility","title":"Accessibility","items":[{"url":"#aria","title":"ARIA"}]},{"url":"#faq","title":"FAQ"}]},"body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n  \"localeCode\": \"en-US\",\n  \"order\": 68,\n  \"category\": \"Show\",\n  \"title\": \"Collapsible\",\n  \"subTitle\": \"Collapsible\",\n  \"icon\": \"doc-collapsible\",\n  \"brief\": \"The collapsible component is a container component used to put long sections of information under a block that can be expanded or collapsed.\"\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"When to use\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Collapsible\"), \"is a behavior component with animation effect by default. It is used in various components in Semi Components, including: \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Navigation\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Collapse\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Tree\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"TreeSelect\"), \", and \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Typography\"), \".\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"When the above components do not meet requirements or customized collapsed behavior, you can use \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Collapsible\"), \" to put in contents that need to be expanded or folded.\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Demos\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"How to import\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"import\",\n    \"import\": true\n  }, \"import { Collapsible } from '@douyinfe/semi-ui';\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Basic Usage\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Use \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"isOpen\"), \" to control the expansion or folding of the content.\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true hideInDSM\",\n    \"live\": \"true\",\n    \"hideInDSM\": true\n  }, \"import React, { useState } from 'react';\\nimport { Collapsible, Button } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const [isOpen, setOpen] = useState();\\n    const toggle = () => {\\n        setOpen(!isOpen);\\n    };\\n    const collapsed = (\\n        <ul>\\n            <li>Nothing can ever happen twice.</li>\\n            <li>In consequence, the sorry fact is</li>\\n            <li>that we arrive here improvised</li>\\n            <li>and leave without the chance to practice. </li>\\n        </ul>\\n    );\\n    return (\\n        <div>\\n            <Button onClick={toggle}>Toggle</Button>\\n            <Collapsible isOpen={isOpen}>{collapsed}</Collapsible>\\n        </div>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Custom Animation Duration\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"You can use \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"duration\"), \" to set animation duration or turn off animation by setting \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"motion={false}\"), \".\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true hideInDSM\",\n    \"live\": \"true\",\n    \"hideInDSM\": true\n  }, \"import React, { useState } from 'react';\\nimport { Collapsible, InputNumber, Button } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const [isOpen, setOpen] = useState(false);\\n    const [duration, setDuration] = useState(250);\\n    const toggle = () => {\\n        setOpen(!isOpen);\\n    };\\n    const collapsed = (\\n        <ul>\\n            <li>Nothing can ever happen twice.</li>\\n            <li>In consequence, the sorry fact is</li>\\n            <li>that we arrive here improvised</li>\\n            <li>and leave without the chance to practice. </li>\\n        </ul>\\n    );\\n    return (\\n        <div>\\n            <label>Set animation duration\\uFF1A</label>\\n            <InputNumber min={0} defaultValue={250} style={{ width: 120 }} onChange={(val) => setDuration(val)} step={10} />\\n            <br />\\n            <Button onClick={toggle}>Toggle</Button>\\n            <Collapsible isOpen={isOpen} duration={duration}>\\n                {collapsed}\\n            </Collapsible>\\n        </div>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Nested use\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true hideInDSM\",\n    \"live\": \"true\",\n    \"hideInDSM\": true\n  }, \"import React from 'react';\\nimport { Collapsible, Button } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const [isOpen, setOpen] = useState(false);\\n    const [isChildOpen, setChildOpen] = useState(false);\\n\\n    const collapsed = (\\n        <ul>\\n            <li>Nothing can ever happen twice.</li>\\n            <li>In consequence, the sorry fact is</li>\\n            <li>that we arrive here improvised</li>\\n            <li>and leave without the chance to practice. </li>\\n        </ul>\\n    );\\n    return (\\n        <div>\\n            <Button onClick={() => setOpen(!isOpen)}>Toggle</Button>\\n            <br />\\n            <Collapsible isOpen={isOpen}>\\n                <div>\\n                    <span>Conntent of first level</span>\\n                    <Button onClick={() => setChildOpen(!isChildOpen)}>Toggle List</Button>\\n                </div>\\n                <Collapsible isOpen={isChildOpen}>{collapsed}</Collapsible>\\n            </Collapsible>\\n        </div>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Custom CollapseHeight\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"You could use \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"collapseHeight\"), \" to customize collapsed height.\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true hideInDSM\",\n    \"live\": \"true\",\n    \"hideInDSM\": true\n  }, \"import React, { useState } from 'react';\\nimport { Collapsible, Button } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const [isOpen, setOpen] = useState(false);\\n    const maskStyle = isOpen\\n        ? {}\\n        : {\\n            WebkitMaskImage:\\n                    'linear-gradient(to bottom, black 0%, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0.2) 80%, transparent 100%)',\\n        };\\n    const collapsed = (\\n        <ul>\\n            <li>Nothing can ever happen twice.</li>\\n            <li>In consequence, the sorry fact is</li>\\n            <li>that we arrive here improvised</li>\\n            <li>and leave without the chance to practice. </li>\\n        </ul>\\n    );\\n    const toggle = () => {\\n        setOpen(!isOpen);\\n    };\\n    const linkStyle = {\\n        position: 'absolute',\\n        left: 0,\\n        right: 0,\\n        textAlign: 'center',\\n        bottom: -10,\\n        fontWeight: 700,\\n        cursor: 'pointer',\\n    };\\n    return (\\n        <>\\n            <Button onClick={toggle}>Toggle</Button>\\n            <div style={{ position: 'relative' }}>\\n                <Collapsible isOpen={isOpen} collapseHeight={60} style={{ ...maskStyle }}>\\n                    {collapsed}\\n                </Collapsible>\\n                {isOpen ? null : (\\n                    <a onClick={toggle} style={{ ...linkStyle }}>\\n                        + Show More\\n                    </a>\\n                )}\\n            </div>\\n        </>\\n    );\\n};\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"API reference\"), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Properties\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Instructions\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"type\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Default\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"version\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"className\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Class name\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"0.34.0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"collapseHeight\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Collapse height\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"0\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"1.0.0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"collapseHeightAdaptive\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Whether to adapt to content height when content height is less than collapseHeight. When true, the collapsed height is Math.min(content height, collapseHeight)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"2.77.0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"duration\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Time of animation execution\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"250\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"isOpen\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Toggle whether to expand the content area\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"false\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"keepDOM\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Whether to keep the hidden panel in DOM tree, destroyed by default\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"false\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"0.25.0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"lazyRender\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Used with keepDOM, when true, the component will not be rendered when mounting\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"false\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"2.54\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"motion\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Toggle whether to turn on animation\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Motion\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"true\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onMotionEnd\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Animation end callback\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"() => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"reCalcKey\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"When reCalcKey changes, the height of children will be reset. Used for optimize dynamic content rendering.\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number \", \"|\", \" string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"1.5.0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"style\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Style object\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"CSSProperties\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"0.34.0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"aria-controls\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls\"\n  }, \"aria-controls\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"2.3.0\"))))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Accessibility\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"ARIA\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Collapsible has \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"id\"), \" props, the value passed in will be set as the id of the wrapper element, which can be used with other components' \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-controls\"), \" to indicate the control relationship, see the usage example below.\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"import Collapsible from './index';\\n\\n\\n()=>{\\n    const collapseId = 'myCollapsible';\\n    const [visible, setVisible]=useState(false);\\n    return <>\\n        <Button onClick={()=>setVisible(!visible)} aria-controls={`${collapseId}`}>{visible?'hide':'show'}</Button>\\n        <Collapsible isOpen={visible} id={collapseId}>\\n            <div>hide content</div>\\n        </Collapsible>\\n    </>;\\n};\\n\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"FAQ\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Why Collapsible does not expand as expected?\", mdx(\"br\", {\n    parentName: \"li\"\n  }), \"Check if the display of parent item of \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Collapsible\"), \" once was set to \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"none\"), \". In this case, \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Collapsible\"), \" could not get height of node properly. If this is not the issue, contact Semi developers to see if other issues exist.\"))));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"en-US/show/collapsible","next":{"fields":{"slug":"zh-CN/show/collapsible"},"id":"cf73f8d4-a400-5692-a876-fdd1a4bb6d59","frontmatter":{"title":"Collapsible 折叠","localeCode":"zh-CN","icon":"doc-collapsible","showNew":null}},"previous":{"fields":{"slug":"zh-CN/show/collapse"},"id":"a336ac9e-6dd6-52bd-998f-400724a2676c","frontmatter":{"title":"Collapse 折叠面板","localeCode":"zh-CN","icon":"doc-accordion","showNew":null}}}},"staticQueryHashes":["1348983216108720","1477422646108720","3245198693108720","417590761108720","63159454108720"]}