{"id":16760423,"url":"https://github.com/ryanve/taos","last_synced_at":"2025-03-16T09:16:56.670Z","repository":{"id":2111141,"uuid":"3052966","full_name":"ryanve/taos","owner":"ryanve","description":"Toggle areas or styles via HTML5 data attributes","archived":false,"fork":false,"pushed_at":"2012-10-25T09:42:27.000Z","size":152,"stargazers_count":3,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-15T21:51:23.700Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://github.com/ryanve/taos","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"artoolkit/arunity5","license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ryanve.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2011-12-26T19:22:12.000Z","updated_at":"2023-08-08T21:09:02.000Z","dependencies_parsed_at":"2022-08-20T17:20:26.994Z","dependency_job_id":null,"html_url":"https://github.com/ryanve/taos","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanve%2Ftaos","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanve%2Ftaos/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanve%2Ftaos/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanve%2Ftaos/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ryanve","download_url":"https://codeload.github.com/ryanve/taos/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243847056,"owners_count":20357317,"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-10-13T04:23:29.401Z","updated_at":"2025-03-16T09:16:56.636Z","avatar_url":"https://github.com/ryanve.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"**[TAOS](https://github.com/ryanve/taos)** (toggle areas or styles) is a [jQuery](http://jquery.com) (or [ender](http://ender.no.de/#jeesh)) plugin that helps designers easily setup efficient toggles and style switchers via HTML5 data attributes. I wrote the plugin because I wanted insanely simple but flexible ways to make style switchers and element toggles without rewriting JavaScript each time.\n\n```html\n\u003cscript src=\"jquery.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"taos.js\"\u003e\u003c/script\u003e\n```\n\n## Styles\n\nA **style** toggle is activated by adding the `data-taos-style` attribute to the element that should be its control. The format for attribute is `selector ! class(es)` where the selector represents the element(s) whose class you want to toggle. If the selector is omitted, the toggle will affect the element on which it is placed. If you just put one class, then it will simply toggle on and off. Delimit with spaces to toggle multiple classes at once. Delimit with pipes `|` to cycle between classes. Examples:\n\n#### 1-way (on/off)\n```html\n\n\u003c!-- Toggle .dark on/off the link itself. --\u003e\n\u003ca data-taos-style=\"dark\"\u003eToggle styles\u003c/a\u003e \n\n\u003c!-- Toggle .dark on/off the html tag --\u003e\n\u003ca data-taos-style=\"html ! dark\"\u003eToggle styles\u003c/a\u003e \n\n\u003c!-- Toggle .dark on/off the #main element --\u003e\n\u003ca data-taos-style=\"#main ! dark\"\u003eToggle styles\u003c/a\u003e \n\n\u003c!-- Toggle .dark on/off all .a and .b elems --\u003e\n\u003ca data-taos-style=\".a, .b ! dark\"\u003eToggle styles\u003c/a\u003e \n\n\u003c!-- Toggle *both* .red and .heart on/off the html tag --\u003e\n\u003ca data-taos-style=\"html ! red heart\"\u003eToggle styles\u003c/a\u003e \n````\n\n#### Multiple (cycle classes)\n```html\n\n\u003c!-- Cycle between .dark and .light on the html tag --\u003e\n\u003ca data-taos-style=\"html ! dark | light\"\u003eToggle styles\u003c/a\u003e \n\n\u003c!-- Cycle between .dark, .light, .retro, and .neon on #main --\u003e\n\u003ca data-taos-style=\"#main ! dark | light | retro | neon\"\u003eToggle styles\u003c/a\u003e \n\n\u003c!-- Cycle between pairs of classes on the body tag --\u003e\n\u003ca data-taos-style=\"body ! red heart | red diamond | black ace | black club\"\u003eToggle styles\u003c/a\u003e \n````\n\n## Areas \n\nAn **area** toggle is activated by adding the `data-taos-area` attribute to the element that should be its control. The value of the attribute should be the selector for the element you want to toggle. Multiple elements can be cycled by separating selectors with pipes `|`. Flags for duration (in milliseconds) and easing method can be added. In basic jQuery the two easing methods are `swing` (default) and `linear`. If using jQuery UI's effects package then [these easing methods](http://jqueryui.com/demos/effect/easing.html) are also available.\n\n#### 1-way (show/hide)\n\n\n```html\n\u003c!-- Toggle visiblity of #content --\u003e\n\u003ca data-taos-area=\"#content\"\u003eToggle content\u003c/a\u003e\n\n\u003c!-- Toggle visiblity of #content with 3000ms transition --\u003e\n\u003ca data-taos-area=\"#content !3000\"\u003eToggle content\u003c/a\u003e\n\n\u003c!-- Toggle visiblity of #content with easing method from jQuery UI --\u003e\n\u003ca data-taos-area=\"#content !easeInBounce\"\u003eToggle content\u003c/a\u003e\n\n\u003c!-- Toggle visiblity of #content with linear easing method and 800ms transition --\u003e\n\u003ca data-taos-area=\"#content !linear !800\"\u003eToggle content\u003c/a\u003e\n\n\u003c!-- Toggle visiblity of all .details elems inside #content --\u003e\n\u003ca data-taos-area=\"#content .details\"\u003eToggle details\u003c/a\u003e\n```\n\n#### Multiple (cycle shown elems)\n\nUse the pipe `|` to delimit areas:\n\n```html\n\u003c!-- Cycle visiblity between #photo1, #photo2, and #photo3 --\u003e\n\u003ca data-taos-area=\"#photo1 | #photo2 | #photo3\"\u003eNext photo\u003c/a\u003e\n\n\u003c!-- Cycle visiblity between figure img and figure figcaption with 300ms transition --\u003e\n\u003ca data-taos-area=\"figure img | figure figcaption !300\"\u003eShow info\u003c/a\u003e\n\n\u003c!-- Cycle visiblity between .entry and .widget elems with linear easing and 300ms transition --\u003e\n\u003ca data-taos-area=\".entry | .widget !linear !300\"\u003eShow info\u003c/a\u003e\n```\n\n## License\n\n### TAOS is available under the [MIT license](http://en.wikipedia.org/wiki/MIT_License)\n\nCopyright (C) 2011 by [Ryan Van Etten](https://github.com/ryanve)\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in\nall copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\nTHE SOFTWARE.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryanve%2Ftaos","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fryanve%2Ftaos","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryanve%2Ftaos/lists"}