{"id":13739626,"url":"https://github.com/flatlogic/bootstrap-tabcollapse","last_synced_at":"2026-01-25T09:33:48.136Z","repository":{"id":9543282,"uuid":"11448289","full_name":"flatlogic/bootstrap-tabcollapse","owner":"flatlogic","description":"Bootstrap Tab Collapse plugin. Switches bootstrap tabs component to collapse for small screens","archived":false,"fork":false,"pushed_at":"2021-02-18T16:47:57.000Z","size":200,"stargazers_count":370,"open_issues_count":11,"forks_count":129,"subscribers_count":29,"default_branch":"master","last_synced_at":"2025-11-11T19:07:39.423Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","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/flatlogic.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-07-16T11:50:06.000Z","updated_at":"2025-10-26T17:41:41.000Z","dependencies_parsed_at":"2022-08-28T05:30:38.052Z","dependency_job_id":null,"html_url":"https://github.com/flatlogic/bootstrap-tabcollapse","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"purl":"pkg:github/flatlogic/bootstrap-tabcollapse","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flatlogic%2Fbootstrap-tabcollapse","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flatlogic%2Fbootstrap-tabcollapse/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flatlogic%2Fbootstrap-tabcollapse/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flatlogic%2Fbootstrap-tabcollapse/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/flatlogic","download_url":"https://codeload.github.com/flatlogic/bootstrap-tabcollapse/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flatlogic%2Fbootstrap-tabcollapse/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28750875,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-25T09:00:19.176Z","status":"ssl_error","status_checked_at":"2026-01-25T09:00:04.131Z","response_time":113,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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-08-03T04:00:35.921Z","updated_at":"2026-01-25T09:33:48.117Z","avatar_url":"https://github.com/flatlogic.png","language":"HTML","funding_links":[],"categories":["Components"],"sub_categories":[],"readme":"Bootstrap Tab Collapse\n======================\n\nSmall bootstrap plugin that switches bootstrap tabs component to collapse component for small screens.\n\n\n[View Demo](http://tabcollapse.okendoken.com/example/example.html) | [Download](https://github.com/flatlogic/bootstrap-tabcollapse.git) | [More templates](https://flatlogic.com/templates) | [Support forum](https://flatlogic.com/forum)\n\nHow it works\n------------\n\nThe most obvious way: bootstrap tab collapse generates accordion markup and appends it right away after tabs component.\nWhen accordion becomes (If accordion is) visible tabcollapse searchs for `.tab-pane` and detaches their content to appropriate\naccordion groups keeping all attached js data.\nTabs component is given `hidden-xs`-class and accordion component is given `visible-xs`-class. That's it.\n\nUse\n------------\n\nLets say you have your tabs component right from bootstrap's site:\n\n    \u003cul id=\"myTab\" class=\"nav nav-tabs\"\u003e\n      \u003cli class=\"active\"\u003e\u003ca href=\"#home\" data-toggle=\"tab\"\u003eHome\u003c/a\u003e\u003c/li\u003e\n      \u003cli\u003e\u003ca href=\"#profile\" data-toggle=\"tab\"\u003eProfile\u003c/a\u003e\u003c/li\u003e\n      ...\n    \u003c/ul\u003e\n    \u003cdiv id=\"myTabContent\" class=\"tab-content\"\u003e\n        \u003cdiv class=\"tab-pane fade in active\" id=\"home\"\u003e\n            \u003cp\u003eRaw denim you probably haven't...\u003c/p\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"tab-pane fade\" id=\"profile\"\u003e\n            \u003cp\u003eFood truck fixie locavore, accus...\u003c/p\u003e\n        \u003c/div\u003e\n        ...\n    \u003c/div\u003e\n\nTo activate tab collapse just include **bootstrap-tabcollapse.js** somewhere in your file and call:\n\n    $('#myTab').tabCollapse();\n\nIf you want to specify the class that is given to accordion and tabs components you can do so by passing options to `tabCollapse`:\n\n    $('#myTab').tabCollapse({\n        tabsClass: 'hidden-sm',\n        accordionClass: 'visible-sm'\n    });\n\nThe default class is `hidden-xs`. So it means that tabs component will be switched to accordion for 767px and below. You can define your own classes and use them.\nYou can also use multiple Bootstrap classes in order to, for example, show accordion for mobile + tablets and tabs for desktop+:\n\n    $('#myTab').tabCollapse({\n        tabsClass: 'hidden-sm hidden-xs',\n        accordionClass: 'visible-sm visible-xs'\n    });\n\nEvents\n------------\n\nThere are four events tabcollapse triggers (for **entire** component, not for single tabs or accordion groups!):\n-   **show-tabs.bs.tabcollapse** - triggered before tabs component is shown\n-   **shown-tabs.bs.tabcollapse** - triggered after tabs component is shown\n-   **show-accordion.bs.tabcollapse** - triggered before accordion component is shown\n-   **shown-accordion.bs.tabcollapse** - triggered after accordion component is shown\n\nTo attach event handler just call:\n\n    $('#myTab').on('shown-accordion.bs.tabcollapse', function(){\n        alert('accordion is shown now!');\n    });\n\nAttach an event handler when **either** tab or collapse is opened:\n------------\n\n    $(document).on(\"shown.bs.collapse shown.bs.tab\", \".panel-collapse, a[data-toggle='tab']\", function (e) {\n        alert('either tab or collapse opened - check arguments to distinguish ' + e);\n    });\n\nSupport\n------------------------------\nFor any additional information please go to our [**support forum**](https://flatlogic.com/forum) and raise your questions or feedback provide there. We highly appreciate your participation!\n    \nHow can I support developers?\n------------------------------\n- Star our GitHub repo :star:\n- Create pull requests, submit bugs, suggest new features or documentation updates :wrench:\n- Follow us on [Twitter](https://twitter.com/flatlogic) :feet:\n- Like our page on [Facebook](https://www.facebook.com/flatlogic/) :thumbsup:\n\nContributors\n------------\n\nThanks to [bdaenen](https://github.com/bdaenen) for contributing.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflatlogic%2Fbootstrap-tabcollapse","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fflatlogic%2Fbootstrap-tabcollapse","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflatlogic%2Fbootstrap-tabcollapse/lists"}