{"id":21076461,"url":"https://github.com/imelgrat/tab-collapse","last_synced_at":"2026-04-16T07:31:17.376Z","repository":{"id":93311959,"uuid":"115551423","full_name":"imelgrat/tab-collapse","owner":"imelgrat","description":" While Bootstrap's Collapse component (accordions) can be very useful and works well in mobile websites, tab-based navigation usually works better in desktop screens. This component provides a way to integrate both tabs and accordions using some extra CSS and Javascript.","archived":false,"fork":false,"pushed_at":"2017-12-27T21:59:06.000Z","size":9,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-20T22:53:12.881Z","etag":null,"topics":["accordion","bootstrap","bootstrap-collapse","bootstrap-collapse-component","bootstrap-components","collapse","collapse-component","css","css3","javascript","jquery","js","navigation","tab-navigation","tabs"],"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/imelgrat.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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":"2017-12-27T19:32:18.000Z","updated_at":"2024-01-19T13:51:25.000Z","dependencies_parsed_at":null,"dependency_job_id":"a44940df-e48d-45de-8b04-443ac81cc70e","html_url":"https://github.com/imelgrat/tab-collapse","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imelgrat%2Ftab-collapse","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imelgrat%2Ftab-collapse/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imelgrat%2Ftab-collapse/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imelgrat%2Ftab-collapse/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/imelgrat","download_url":"https://codeload.github.com/imelgrat/tab-collapse/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243521253,"owners_count":20304186,"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","bootstrap","bootstrap-collapse","bootstrap-collapse-component","bootstrap-components","collapse","collapse-component","css","css3","javascript","jquery","js","navigation","tab-navigation","tabs"],"created_at":"2024-11-19T19:28:31.828Z","updated_at":"2026-04-16T07:31:11.935Z","avatar_url":"https://github.com/imelgrat.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Tab/Collapse\nWhile Bootstrap's Collapse component (accordions) can be very useful and works well in mobile websites, tab-based navigation usually works better in desktop screens. This component provides a way to integrate both tabs and accordions using some extra CSS and Javascript.\n\nDeveloped by [Ivan Melgrati](https://imelgrat.me) [![Twitter](https://img.shields.io/twitter/url/https/github.com/imelgrat/tab-collapse.svg?style=social)](https://twitter.com/imelgrat)\n\nLicense: [![GitHub license](https://img.shields.io/github/license/imelgrat/tab-collapse.svg)](https://github.com/imelgrat/tab-collapse/blob/master/LICENSE)\n\nStatus: [![GitHub release](https://img.shields.io/github/release/imelgrat/tab-collapse.svg)](https://github.com/imelgrat/tab-collapse) [![GitHub issues](https://img.shields.io/github/issues/imelgrat/tab-collapse.svg)](https://github.com/imelgrat/tab-collapse/issues) [![GitHub forks](https://img.shields.io/github/forks/imelgrat/tab-collapse.svg)](https://github.com/imelgrat/tab-collapse/network) [![GitHub stars](https://img.shields.io/github/stars/imelgrat/tab-collapse.svg)](https://github.com/imelgrat/tab-collapse/stargazers)\n\n\nRequirements\n------------\n\n*   jQuery \u003e= 3.0\n*   Bootstrap \u003e= 3.3\n\nInstallation\n------------\n\nWhile most of the code required to make tabs and accordions work comes from Bootstrap, it is necessary to add some extra code to make the \"component switch\" between tabs and accordions view and navigation work.\nAfter adding both jQuery and Bootstrap, it's necessary to add the component's CSS rules and JavaScript code\n\n```html\n\u003clink rel=\"stylesheet\" href=\"../dist/css/tabcollapse-style.css\" crossorigin=\"anonymous\"\u003e\n\u003cscript src=\"../dist/js/tabcollapse-script.js\" crossorigin=\"anonymous\"\u003e\u003c/script\u003e\n```\n\nUsage\n------------\nFor the Tab/Collapse to work, it's necessary to create three blocks. The *vertab-container* div (the whole component's container, used as CSS and JS selector), the *vertab-menu* section (tab navigation links) and the *vertab-accordion* section (accordion and content sections). \nFor each content section, it's necessary to create a link inside the *list-group* block and a *vertab-content* block.\n\n```html\n\u003cdiv class=\"col-lg-12 vertab-container\"\u003e\n\t\u003cdiv class=\"col-lg-3 col-md-3 col-sm-3 vertab-menu\"\u003e\n\t\t\u003cdiv class=\"list-group\"\u003e\n\t\t\t\u003ca href=\"#\" class=\"list-group-item text-left\"\u003e This is Tab 1 \u003c/a\u003e\n\t\t\t.......\n\t\t\u003c/div\u003e\n\t\u003c/div\u003e\n\t\u003cdiv id=\"accordion\" class=\"col-lg-9 col-md-9 col-sm-9 col-xs-12 vertab-accordion panel-group\"\u003e\n\t\t\u003cdiv class=\"vertab-content\"\u003e\n\t\t\t\u003cdiv class=\"panel-heading\"\u003e\n\t\t\t\t\u003ch4 class=\"panel-title\" data-toggle=\"collapse\" data-parent=\"#accordion\" data-target=\"#collapse1\"\u003e This is Heading 1 \u003c/h4\u003e\n\t\t\t\u003c/div\u003e\n\t\t\t\u003cdiv id=\"collapse1\" class=\"panel-collapse collapse\"\u003e\n\t\t\t\t\u003cdiv class=\"panel-body\"\u003e\n\t\t\t\t\tHere goes the content\n\t\t\t\t\u003c/div\u003e\n\t\t\t\u003c/div\u003e\n\t\t\u003c/div\u003e\n\t\t......... \n\t\u003c/div\u003e\n\u003c/div\u003e\n```\nFeedback\n--------\n\nPlease open an issue to request a feature or submit a bug report. Or even if\nyou just want to provide some feedback, I'd love to hear. I'm also available on\nTwitter as [@imelgrat](https://twitter.com/imelgrat).\n\nContributing\n------------\n\n1.  Fork it.\n2.  Create your feature branch (`git checkout -b my-new-feature`).\n3.  Commit your changes (`git commit -am 'Added some feature'`).\n4.  Push to the branch (`git push origin my-new-feature`).\n5.  Create a new Pull Request.\n\nLinks\n====\n* Article/Tutorial: https://imelgrat.me/javascript/integrate-bootstrap-tabs-accordions/\n* Live example: https://codepen.io/imelgrat/details/wpGgpN/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimelgrat%2Ftab-collapse","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fimelgrat%2Ftab-collapse","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimelgrat%2Ftab-collapse/lists"}