{"id":22325766,"url":"https://github.com/kunukn/vue-height-collapsible","last_synced_at":"2025-07-29T16:33:26.949Z","repository":{"id":65519361,"uuid":"346648721","full_name":"kunukn/vue-height-collapsible","owner":"kunukn","description":"vue-height-collapsible","archived":false,"fork":false,"pushed_at":"2023-06-24T22:46:32.000Z","size":956,"stargazers_count":4,"open_issues_count":0,"forks_count":4,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-21T13:48:57.792Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/kunukn.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","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":"2021-03-11T09:33:47.000Z","updated_at":"2023-12-23T21:15:26.000Z","dependencies_parsed_at":"2024-12-04T02:13:40.183Z","dependency_job_id":"4afff541-ef0b-4b09-8aff-5573771204b2","html_url":"https://github.com/kunukn/vue-height-collapsible","commit_stats":{"total_commits":41,"total_committers":1,"mean_commits":41.0,"dds":0.0,"last_synced_commit":"bb768e7749f8d24d54276450a615b7e78af52e0c"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/kunukn/vue-height-collapsible","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kunukn%2Fvue-height-collapsible","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kunukn%2Fvue-height-collapsible/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kunukn%2Fvue-height-collapsible/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kunukn%2Fvue-height-collapsible/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kunukn","download_url":"https://codeload.github.com/kunukn/vue-height-collapsible/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kunukn%2Fvue-height-collapsible/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267718284,"owners_count":24133448,"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","status":"online","status_checked_at":"2025-07-29T02:00:12.549Z","response_time":2574,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2024-12-04T02:13:37.198Z","updated_at":"2025-07-29T16:33:26.640Z","avatar_url":"https://github.com/kunukn.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vue HeightCollapsible\n\nCollapsible component with CSS transition for elements with variable and dynamic height.\n\n[![npm version](https://img.shields.io/npm/v/vue-height-collapsible.svg?style=flat-square)](https://www.npmjs.com/package/vue-height-collapsible)\n[![npm downloads](https://img.shields.io/npm/dm/vue-height-collapsible.svg?style=flat-square)](https://www.npmjs.com/package/vue-height-collapsible)\n[![gzip](https://img.shields.io/bundlephobia/minzip/vue-height-collapsible.svg)](https://bundlephobia.com/result?p=vue-height-collapsible)\n[![license](https://img.shields.io/github/license/kunukn/vue-height-collapsible.svg)](https://github.com/kunukn/vue-height-collapsible/blob/master/LICENSE)\n\nVue HeightCollapsible\n\n![logo](logo/collapsible.svg 'logo')\n\n## Demo\n\n\u003cimg src=\"demo/height-collapsible.gif\" \n  style=\"max-width: 360px; height: auto;\"\n  alt=\"demo\"\u003e\n\n\u003ctable style=\"border-spacing: 16px;border-collapse: separate;\"\u003e\n\n\u003ctr\u003e\n\u003ctd\u003eCodesandbox simple Vue\u003c/td\u003e\n\u003ctd\u003e\u003cimg width=\"24\" height=\"24\" src=\"ui-library-logo/Vue-logo.svg\"/\u003e\u003c/td\u003e\n\u003ctd\u003e\u003ca href=\"https://ooisb.csb.app/\" target=\"_blank\" rel=\"noopener noreferrer\"\u003eView\u003c/a\u003e\u003c/td\u003e\n\u003ctd\u003e\u003ca href=\"https://codesandbox.io/s/vue-height-collapsible-demo-ooisb\" target=\"_blank\" rel=\"noopener noreferrer\"\u003eEdit\u003c/a\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003eCodesandbox multiple Vue\u003c/td\u003e\n\u003ctd\u003e\u003cimg width=\"24\" height=\"24\" src=\"ui-library-logo/Vue-logo.svg\"/\u003e\u003c/td\u003e\n\u003ctd\u003e\u003ca href=\"https://y2jjy.csb.app\" target=\"_blank\" rel=\"noopener noreferrer\"\u003eView\u003c/a\u003e\u003c/td\u003e\n\u003ctd\u003e\u003ca href=\"https://codesandbox.io/s/vue-height-collapsible-demo-y2jjy\" target=\"_blank\" rel=\"noopener noreferrer\"\u003eEdit\u003c/a\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003eCodesandbox simple Vue 3\u003c/td\u003e\n\u003ctd\u003e\u003cimg width=\"24\" height=\"24\" src=\"ui-library-logo/Vue-logo.svg\"/\u003e\u003c/td\u003e\n\u003ctd\u003e\u003ca href=\"https://io8x6.csb.app\" target=\"_blank\" rel=\"noopener noreferrer\"\u003eView\u003c/a\u003e\u003c/td\u003e\n\u003ctd\u003e\u003ca href=\"https://codesandbox.io/s/vue-3-height-collapsible-demo-io8x6\" target=\"_blank\" rel=\"noopener noreferrer\"\u003eEdit\u003c/a\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003c/table\u003e\n\n# CSS required\n\n:warning: ️You need to add style (transition) in your own stylesheet to add animation. Here is an example.\n\n```html\n\u003cstyle\u003e\n  [data-height-collapsible] {\n    transition: height 280ms cubic-bezier(0.4, 0, 0.2, 1);\n  }\n\u003c/style\u003e\n```\n\nAlternatively you can add it using the `transition` prop.\n\n## Supported versions\n\n### Vue 2 and Vue 3\n\n```bash\nnpm install vue-height-collapsible\n// or yarn install vue-height-collapsible\n```\n\n### Vue 2\n\n```vue\nimport HeightCollapsible from \"vue-height-collapsible\";\n```\n\n### Vue 3\n\n```vue\nimport HeightCollapsible from \"vue-height-collapsible/vue3\";\n```\n\n### Alternative approach\n\nThe source file could be copied. It is only this file.\u003cbr/\u003e\n`vue-height-collapsible.vue`\n\n## Usage example\n\n### Simple\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv class=\"my-component\"\u003e\n    \u003cbutton @click=\"isOpen = !isOpen\"\u003eToggle\u003c/button\u003e\n    \u003cHeightCollapsible :isOpen=\"isOpen\"\u003e\n      \u003cp\u003eParagraph of text.\u003c/p\u003e\n      \u003cp\u003eAnother paragraph is also OK.\u003c/p\u003e\n    \u003c/HeightCollapsible\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport HeightCollapsible from 'vue-height-collapsible'\n\nexport default {\n  name: 'MyComponent',\n  components: {\n    HeightCollapsible,\n  },\n  data() {\n    return {\n      isOpen: true,\n    }\n  },\n}\n\u003c/script\u003e\n```\n\n### Using Aria and scoped slots\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv class=\"my-component\"\u003e\n    \u003cbutton\n      @click=\"isOpen = !isOpen\"\n      :aria-expanded=\"isOpen\"\n      aria-controls=\"my-collapsible-1\"\n    \u003e\n      \u003cspan\u003eToggle {{ collapseState }}\u003c/span\u003e\n    \u003c/button\u003e\n    \u003cHeightCollapsible\n      :isOpen=\"isOpen\"\n      @update=\"onUpdate\"\n      v-slot=\"{ state }\"\n      id=\"my-collapsible-1\"\n    \u003e\n      \u003cp\u003eI know the collapse state: {{ state }}\u003c/p\u003e\n      \u003cp\u003eParagraph of text.\u003c/p\u003e\n      \u003cp\u003eAnother paragraph is also OK.\u003c/p\u003e\n      \u003cp\u003eImages and any other content are ok too.\u003c/p\u003e\n    \u003c/HeightCollapsible\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport HeightCollapsible from 'vue-height-collapsible'\n\nexport default {\n  name: 'MyComponent',\n  components: {\n    HeightCollapsible,\n  },\n  data() {\n    return {\n      isOpen: true,\n      collapseState: '',\n    }\n  },\n  methods: {\n    onUpdate({ state }) {\n      this.collapseState = state\n    },\n  },\n}\n\u003c/script\u003e\n```\n\n## Properties\n\n| Prop               | Type    | Default |\n| ------------------ | ------- | ------- |\n| isOpen             | boolean | true    |\n| transition         | string  |         |\n| tag                | string  | div     |\n| overflowOnExpanded | boolean | false   |\n\n\u003cbr/\u003e\n\n#### `isOpen` : boolean\n\nExpands or collapses content.\n\n#### `transition` : string\n\nYou can also specify a CSS transition inline by using the `transition` prop.\n\n```html\n\u003cHeightCollapsible transition=\"height 300ms ease-in-out\" :isOpen=\"isOpen\"\u003e\n  \u003cp\u003eParagraph of text\u003c/p\u003e\n\u003c/HeightCollapsible\u003e\n```\n\n#### `tag` : string\n\nYou can specify the HTML element type for the collapse component. By default the element type is a `div` element.\n\n```html\n\u003cHeightCollapsible tag=\"article\" :isOpen=\"isOpen\"\u003e\n  \u003cp\u003eParagraph of text\u003c/p\u003e\n\u003c/HeightCollapsible\u003e\n```\n\n#### `overflowOnExpanded` : boolean\n\nIf added, then `overflow: hidden` inline style will not be added when the state is `expanded`.\n\n\u003cbr\u003e\n\n# npm\n\nhttps://www.npmjs.com/package/vue-height-collapsible\n\n# CDN files\n\nTo see all the available CDN files go to\nhttps://unpkg.com/browse/vue-height-collapsible/\n\n# Design goals\n\n- let the browser handle the animation using CSS height transition\n- minimal in file size\n- minimalistic API - only have a Collapsible component which updates on isOpen props\n- flexible - provide your own markup, styling and easing\n- interruptible - can be reversed during movement\n- inert - when collapsed you should tab over the collapsed component\n- availability - from cdn or npm install, commonjs, minified or ES module\n- collapsible on height only\n\n# This was created with heavy inspiration from\n\nhttps://github.com/kunukn/react-collapse\n\n# Development\n\nThe compiler in this repository works for Vue 2 version.\u003cbr/\u003e\nThis library was created using https://github.com/team-innovation/vue-sfc-rollup\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkunukn%2Fvue-height-collapsible","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkunukn%2Fvue-height-collapsible","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkunukn%2Fvue-height-collapsible/lists"}