{"id":14384540,"url":"https://github.com/glennflanagan/react-collapsible","last_synced_at":"2025-12-29T23:36:55.538Z","repository":{"id":39520441,"uuid":"53065948","full_name":"glennflanagan/react-collapsible","owner":"glennflanagan","description":"React component to wrap content in Collapsible element with trigger to open and close.","archived":false,"fork":false,"pushed_at":"2023-02-28T09:46:41.000Z","size":2977,"stargazers_count":546,"open_issues_count":31,"forks_count":153,"subscribers_count":8,"default_branch":"develop","last_synced_at":"2024-12-12T15:08:49.768Z","etag":null,"topics":["accordion","collapsible","react"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/glennflanagan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-03-03T16:34:45.000Z","updated_at":"2024-12-05T15:38:11.000Z","dependencies_parsed_at":"2024-06-18T12:17:54.219Z","dependency_job_id":"68101f2e-b7d5-48e1-9d51-46208a00bbae","html_url":"https://github.com/glennflanagan/react-collapsible","commit_stats":{"total_commits":215,"total_committers":47,"mean_commits":4.574468085106383,"dds":0.813953488372093,"last_synced_commit":"1b987617fe7c20337977a0a877574263ed7ed657"},"previous_names":[],"tags_count":33,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glennflanagan%2Freact-collapsible","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glennflanagan%2Freact-collapsible/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glennflanagan%2Freact-collapsible/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glennflanagan%2Freact-collapsible/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/glennflanagan","download_url":"https://codeload.github.com/glennflanagan/react-collapsible/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230450097,"owners_count":18227690,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["accordion","collapsible","react"],"created_at":"2024-08-28T18:01:27.677Z","updated_at":"2025-12-29T23:36:55.508Z","avatar_url":"https://github.com/glennflanagan.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"[![Npm Version](https://img.shields.io/npm/v/react-collapsible.svg?style=flat-square)](https://www.npmjs.com/package/react-collapsible) [![License](https://img.shields.io/npm/l/react-collapsible.svg?style=flat-square)](https://github.com/glennflanagan/react-collapsible/blob/develop/LICENSE.md) [![Downloads Per Week](https://img.shields.io/npm/dw/react-collapsible.svg?style=flat-square)](https://npmcharts.com/compare/react-collapsible)\n\n# React Responsive Collapsible Section Component (Collapsible)\n\nReact component to wrap content in Collapsible element with trigger to open and close.\n\n![Alt text](example/img/example.gif)\n\nIt's like an accordion, but where any number of sections can be open at the same time.\n\nSupported by [Browserstack](https://www.browserstack.com).\n\n![Browserstack Logo](example/img/browserstack-logo.png 'Browserstack')\n\n---\n\n## Migrating from v1.x to v2.x\n\nVersion 2 is 100% API complete to version 1. However, there is a breaking change in the `onOpen` and `onClose` callbacks. These methods now fire at the end of the collapsing animation. There is also the addition of `onOpening` and `onClosing` callbacks which fire at the beginning of the animation.\n\nTo migrate to v2 from v1 simply change the `onOpen` prop to `onOpening` and `onClose` to `onClosing`.\n\n## Installation\n\nInstall via npm or yarn\n\n```bash\nnpm install react-collapsible --save\n\nyarn add react-collapsible\n```\n\n## Usage\n\nCollapsible can receive any HTML elements or React component as it's children. Collapsible will wrap the contents, as well as generate a trigger element which will control showing and hiding.\n\n```javascript\nimport React from 'react';\nimport Collapsible from 'react-collapsible';\n\nconst App = () =\u003e {\n  return (\n    \u003cCollapsible trigger=\"Start here\"\u003e\n      \u003cp\u003e\n        This is the collapsible content. It can be any element or React\n        component you like.\n      \u003c/p\u003e\n      \u003cp\u003e\n        It can even be another Collapsible component. Check out the next\n        section!\n      \u003c/p\u003e\n    \u003c/Collapsible\u003e\n  );\n};\n\nexport default App;\n```\n\nWith a little CSS becomes\n\n![Alt text](example/img/becomes.png)\n\n## Properties _(Options)_\n\n### **contentContainerTagName** | _string_ | default: `div`\n\nTag Name for the Collapsible Root Element.\n\n### **containerElementProps** | _object_\n\nPass props (or attributes) to the top div element. Useful for inserting `id`.\n\n### **trigger** | _string_ or _React Element_ | **required**\n\nThe text or element to appear in the trigger link.\n\n### **triggerTagName** | _string_ | default: span\n\nThe tag name of the element wrapping the trigger text or element.\n\n### **triggerStyle** | _object_ | default: null\n\nAdds a style attribute to the trigger.\n\n### **triggerWhenOpen** | _string_ or _React Element_\n\nOptional trigger text or element to change to when the Collapsible is open.\n\n### **triggerDisabled** | _boolean_ | default: false\n\nDisables the trigger handler if `true`. Note: this has no effect other than applying the `.is-disabled` CSS class if you've provided a `handleTriggerClick` prop.\n\n### **triggerElementProps** | _object_\n\nPass props (or attributes) to the trigger wrapping element. Useful for inserting `role` when using `tabIndex`.\n\nAs an alternative to an auto generated id (which is not guaranteed to be unique in extremely fast builds) that is used as the TriggerElement id, and also as a separate `aria-labelledby` attribute, a custom id can be assigned by providing `triggerElementProps` with an object containing an `id` key and value, e.g. `{id: 'some-value'}`.\n\n### **contentElementId** | _string_\n\nAllows for an alternative to an auto generated id (which is not guaranteed to be unique in extremely fast builds) that is used as part of the component id and the `aria-controls` attribute of the component.\n\n### **transitionTime** | _number_ | default: 400\n\nThe number of milliseconds for the open/close transition to take.\n\n### **transitionCloseTime** | _number_ | default: null\n\nThe number of milliseconds for the close transition to take.\n\n### **easing** | _string_ | default: 'linear'\n\nThe CSS easing method you wish to apply to the open/close transition. This string can be any valid value of CSS `transition-timing-function`. For reference view the [MDN documentation](https://developer.mozilla.org/en/docs/Web/CSS/transition-timing-function).\n\n### **open** | _bool_ | default: false\n\nSet to true if you want the Collapsible to begin in the open state. You can also use this prop to manage the state from a parent component.\n\n### **accordionPosition** | _string_\n\nUnique key used to identify the `Collapse` instance when used in an accordion.\n\n### **handleTriggerClick** | _function_\n\nDefine this to override the click handler for the trigger link. Takes one parameter, which is `props.accordionPosition`.\n\n### **onOpen** | _function_\n\nIs called when the Collapsible has opened.\n\n### **onClose** | _function_\n\nIs called when the Collapsible has closed.\n\n### **onOpening** | _function_\n\nIs called when the Collapsible is opening.\n\n### **onClosing** | _function_\n\nIs called when the Collapsible is closing.\n\n### **onTriggerOpening** | _function_\n\nIs called when the Collapsible open trigger is clicked. Like onOpening except it isn't called when the open prop is updated.\n\n### **onTriggerClosing** | _function_\n\nIs called when the Collapsible close trigger is clicked. Like onClosing except it isn't called when the open prop is updated.\n\n### **lazyRender** | _bool_ | default: false\n\nSet this to true to postpone rendering of all of the content of the Collapsible until before it's opened for the first time\n\n### **overflowWhenOpen** | _enum_ | default: 'hidden'\n\nThe CSS overflow property once the Collapsible is open. This can be any one of the valid CSS values of `'hidden'`, `'visible'`, `'auto'`, `'scroll'`, `'inherit'`, `'initial'`, or `'unset'`\n\n### **contentHiddenWhenClosed** | _bool_ | default: false\n\nSet this to true to add the html hidden attribute to the content when the collapsible is fully closed.\n\n### **triggerSibling** | _element_ | default: null\n\nEscape hatch to add arbitrary content on the trigger without triggering expand/collapse. It's up to you to style it as needed. This is inserted in component tree and DOM directly\nafter `.Collapsible__trigger`\n\n### **tabIndex** | _number_ | default: null\n\nA `tabIndex` prop adds the `tabIndex` attribute to the trigger element which in turn allows the Collapsible trigger to gain focus.\n\n## CSS Class String Props\n\n### **classParentString** | _string_ | default: Collapsible\n\nUse this to overwrite the parent CSS class for the Collapsible component parts. Read more in the CSS section below.\n\n### **className** | _string_\n\n`.Collapsible` element (root) when closed\n\n### **openedClassName** | _string_\n\n`.Collapsible` element (root) when open\n\n### **triggerClassName** | _string_\n\n`.Collapsible__trigger` element (root) when closed\n\n### **triggerOpenedClassName** | _string_\n\n`.Collapsible__trigger` element (root) when open\n\n### **contentOuterClassName** | _string_\n\n`.Collapsible__contentOuter` element\n\n### **contentInnerClassName** | _string_\n\n`.Collapsible__contentInner` element\n\n## CSS Styles\n\nIn theory you don't need any CSS to get this to work, but let's face it, it'd be pretty rubbish without it.\n\nBy default the parent CSS class name is `.Collapsible` but this can be changed by setting the `classParentString` property on the component.\n\nThe CSS class names follow a [type of BEM pattern](http://getbem.com/introduction/) of CSS naming. Below is a list of the CSS classes available on the component.\n\n### `.Collapsible`\n\nThe parent element for the components.\n\n### `.Collapsible__trigger`\n\nThe trigger link that controls the opening and closing of the component.\nThe state of the component is also reflected on this element with the modifier classes;\n\n- `is-closed` | Closed state\n- `is-open` | Open setState\n- `is-disabled` | Trigger is disabled\n\n### `.Collapsible__contentOuter`\n\nThe outer container that hides the content. This is set to `overflow: hidden` within the javascript but everything else about it is for you to change.\n\n### `.Collapsible__contentInner`\n\nThis is a container for the content passed into the component. This keeps everything nice and neat and allows the component to do all it's whizzy calculations.\n\nIf you're using a CSS framework such as Foundation or Bootstrap, you probably want to use their classes instead of styling `.Collapsible`. See Properties above.\n\n## Example\n\nExamples of `\u003cCollapsible /\u003e` components can be found in the `./example` folder. To get the example running:\n\n```\ncd example \u0026\u0026 yarn \u0026\u0026 yarn start\n```\n\nThis will run a [parceljs](https://parceljs.org) app.\n\n## Issues\n\nPlease create an issue for any bug or feature requests.\n\nHere is a plain [JSFiddle](https://jsfiddle.net/sm7n31p1/1/) to use for replicating bugs.\n\n## Licence\n\nReact Responsive Collapsible Section Component is [MIT licensed](LICENSE.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fglennflanagan%2Freact-collapsible","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fglennflanagan%2Freact-collapsible","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fglennflanagan%2Freact-collapsible/lists"}