{"id":26781650,"url":"https://github.com/pixelunion/bc-tabs","last_synced_at":"2025-03-29T08:17:24.658Z","repository":{"id":44293898,"uuid":"130251570","full_name":"pixelunion/bc-tabs","owner":"pixelunion","description":null,"archived":false,"fork":false,"pushed_at":"2022-12-09T00:41:11.000Z","size":259,"stargazers_count":0,"open_issues_count":12,"forks_count":1,"subscribers_count":16,"default_branch":"master","last_synced_at":"2024-03-26T12:58:30.246Z","etag":null,"topics":["library"],"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/pixelunion.png","metadata":{"files":{"readme":"readme.md","changelog":"changelog.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-04-19T17:42:53.000Z","updated_at":"2021-05-21T15:28:58.000Z","dependencies_parsed_at":"2023-01-25T10:32:39.226Z","dependency_job_id":null,"html_url":"https://github.com/pixelunion/bc-tabs","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pixelunion%2Fbc-tabs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pixelunion%2Fbc-tabs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pixelunion%2Fbc-tabs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pixelunion%2Fbc-tabs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pixelunion","download_url":"https://codeload.github.com/pixelunion/bc-tabs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246156411,"owners_count":20732397,"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":["library"],"created_at":"2025-03-29T08:17:24.222Z","updated_at":"2025-03-29T08:17:24.646Z","avatar_url":"https://github.com/pixelunion.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Bigcommerce Tabs UI Module\n\nCreate a tabbed UI element\n\n## TODO\n- Update `_toggleClasses` to allow for accordion layout.\n- Add responsive setting that allows tabbed UI to break down into accordion at smaller screen sizes\n\n## Installation\n```\nnpm install --save github:pixelunion/bc-tabs\n```\n\n\n## Options\n\nAll options are optional.\n\n### `tabScope`\nThe jQuery object of the tab nav container. defaults to `$('[data-tabs]')`.\n\n### `tabToggle`\nThe jQuery object of the tab link. defaults to `$('[data-tab-title]')`.\n\n### `tabContent`\nThe jQuery object of the tab content. defaults to `$('[data-tab-content]')`.\n\n### `toggleTab`\nOverride for the tab toggle function.\n\n### `keepTabsOpen`\nOverride for keepTabsOpen function.  Needs to return boolean\n\n### `activeClass`\nClass given to both the nav element and content container for the currently active tab.\n\n### `defaultTab`\nE.G. `#search-content-listing`\n\n### `afterSetup`\nCallback function called once the tabs have been initialized. Gets passed the id of the currently active tab.\n\n### `afterChange`\nCallback function called when a tab is clicked. Gets passed the id of the clicked tab.\n\n### `tabHistory`\nLeverage the history API for tab chages. Defaults to `false`.\n\n\n\n## Some sample markup\n\n### Tabs\n```\n\u003cul class=\"tabs\" data-tabs\u003e\n  \u003cli class=\"tab-title\"\u003e\u003ca href=\"#featured-products\"\u003eFeatured Products\u003c/a\u003e\u003c/li\u003e\n  \u003cli class=\"tab-title\"\u003e\u003ca href=\"#best-sellers\"\u003eBest Sellers\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003cdiv class=\"tabs-content\"\u003e\n  \u003cdiv class=\"tabs-content-panel\" id=\"featured-products\"\u003e\n    Tab panel content\n  \u003c/div\u003e\n  \u003cdiv class=\"tabs-content-panel\" id=\"best-sellers\"\u003e\n    Tab panel content\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n### Accordion\n```\n\u003csection data-tabs\u003e\n  \u003ch2 class=\"tab-title\"\u003e\u003ca href=\"#hello\"\u003etab\u003c/a\u003e\u003c/h2\u003e\n  \u003cdiv class=\"tabs-content-panel\" id=\"hello\"\u003e\n   content with an anchor\n   \u003ca href=\"http://google.com\"\u003egoogle\u003c/a\u003e\n  \u003c/div\u003e\n  \u003ch2 class=\"tab-title\"\u003e\u003ca href=\"#goodbye\"\u003etab2\u003c/a\u003e\u003c/h2\u003e\n  \u003cdiv class=\"tabs-content-panel\" id=\"goodbye\"\u003e\n   other content\n  \u003c/div\u003e\n\u003c/section\u003e\n```\n\n### Javascript\n```\n// Constructor:\nthis.tabs = new Tabs({\n  afterSetup: (tabId) =\u003e {\n    alert(`The tabs are ready! the current tab is ${tabId}`);\n  },\n  afterChange: () =\u003e {\n    alert(`A tab has been changed! the new tab is ${tabId}`);\n  }\n});\n\n// _bind:\nthis.tabs.displayTabContent('#leave-review');\n```\n\n### SCSS\n```\n// Style the tab themselves.\n.tab-title {\n  font-weight: normal;\n\n  \u0026.active {\n    font-weight: bold;\n  }\n}\n\n.tab-content-panel {\n  display: none;\n\n  \u0026.active {\n    display: block;\n  }\n}\n```\n\n### Further Development\n\nFor debugging or improvements you can run a standalone test version of the module using a very basic webpack development server:\n\n```\n$ npm install\n$ npm run demo\n```\nThis will allow you to make changes to the JS and HTML while working with a live demo in your browser. \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpixelunion%2Fbc-tabs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpixelunion%2Fbc-tabs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpixelunion%2Fbc-tabs/lists"}