{"id":13446871,"url":"https://github.com/knadh/tinytabs","last_synced_at":"2025-04-03T10:45:13.898Z","repository":{"id":1745683,"uuid":"2571608","full_name":"knadh/tinytabs","owner":"knadh","description":"A tiny (1.3 KB minified) Javascript tabbing library for rendering tabbed UIs. Zero dependencies.","archived":false,"fork":false,"pushed_at":"2020-06-21T07:10:49.000Z","size":60,"stargazers_count":48,"open_issues_count":0,"forks_count":7,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-18T14:57:55.498Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://nadh.in/code/tinytabs","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/knadh.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":"2011-10-13T18:55:41.000Z","updated_at":"2025-03-14T06:07:21.000Z","dependencies_parsed_at":"2022-09-01T19:30:35.485Z","dependency_job_id":null,"html_url":"https://github.com/knadh/tinytabs","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/knadh%2Ftinytabs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/knadh%2Ftinytabs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/knadh%2Ftinytabs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/knadh%2Ftinytabs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/knadh","download_url":"https://codeload.github.com/knadh/tinytabs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246989498,"owners_count":20865306,"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":[],"created_at":"2024-07-31T05:01:01.976Z","updated_at":"2025-04-03T10:45:13.868Z","avatar_url":"https://github.com/knadh.png","language":"HTML","readme":"# tinytabs\ntinytabs is a tiny (1.3 KB minified) Javascript tabbing\nlibrary. Zero dependencies. All you need is a few layers in a container layer, and\nbam, tabbed interface. If Javascript is not enabled, it degrades\nnicely too.\n\nDocumentation and Demo: https://nadh.in/code/tinytabs\n\n![image](https://user-images.githubusercontent.com/547147/60380775-8f1f9a00-9a68-11e9-9ab1-f88d32dd74d9.png)\n\n## Example\n\n### HTML\n```html\n\u003c!-- Include the CSS file in \u003chead\u003e //--\u003e\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"tinytabs.css\" /\u003e\n\n\u003c!-- Content to tab //--\u003e\n\u003cdiv id=\"mytabs\"\u003e\n\t\u003cdiv class=\"section\" id=\"music\"\u003e\n\t\t\u003ch3 class=\"title\"\u003eMusic\u003c/h3\u003e\n\t\tContent here\n\t\u003c/div\u003e\n\t\u003cdiv class=\"section\" id=\"videos\" default\u003e\n\t\t\u003ch3 class=\"title\"\u003eVideos\u003c/h3\u003e\n\t\tContent\n\t\u003c/div\u003e\n\u003c/div\u003e\n\n\u003cscript\u003e\n// With options.\ndocument.addEventListener(\"DOMContentLoaded\", function(e) { \n tinytabs(document.querySelector(\"#mytabs\"), {\n anchor: true,\n hideTitle: false,\n closable: true,\n onClose: function (id) {\n console.log(id)\n }\n });\n});\n\n// Without options.\ndocument.addEventListener(\"DOMContentLoaded\", function(e) { \n tinytabs(document.querySelector(\"#mytabs\"));\n})\n\u003c/script\u003e\n```\n\n## Options\n| anchor | true (default) or false. If enabled, when a tab is clicked, it's id is set in url's fragment so that the tab is retained on page reloads. Also enables linking to a tab directly. Eg: `http://nadh.in/code/tinytabs#tab-example` |\n|--------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| hideTitle | true (default) or falseHide the title element within section elements. |\n| sectionClass | Section element's class. Default is section. |\n| tabsClass | Tab (ul) container's class. Default is tabs. |\n| tabClass | Individual tab's (li) class. Default is tab. |\n| titleClass | Title element's tag. Default is title. |\n| onBefore | function(id, tab). Callback function that gets evaluated before a tab is activated. The first arg is the id of the tab and the second is the DOM element of the tab. |\n| onAfter | function(id, tab). Callback function that gets evaluated after a tab is activated. The first arg is the id of the tab and the second is the DOM element of the tab. |\n| onClose | function(id). Callback function that gets evaluated while closing the tab. The argument is the id of the tab. | \n\nMIT License.\n","funding_links":[],"categories":["HTML"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fknadh%2Ftinytabs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fknadh%2Ftinytabs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fknadh%2Ftinytabs/lists"}