{"main":["swap.js","swap.css"],"options":[{"name":"collapse","type":"boolean","default":"true","description":"Allow swap to collapse it's target"},{"name":"maxWidth","type":"string","default":"Infinity","description":"Width at which to auto-disable plugin"}],"events":[{"name":"activate.swap","description":"Swap activated"},{"name":"deactivate.swap","description":"Swap deactivated"},{"name":"enable.swap","description":"Swap enabled"},{"name":"disable.swap","description":"Swap diabled"}],"methods":[{"name":"activate","description":"Activate instance.","examples":["$(\".target\").swap(\"activate\");"]},{"name":"deactivate","description":"Deactivates instance.","examples":["$(\".target\").swap(\"deactivate\");"]},{"name":"defaults","description":"Extends plugin default settings; effects instances created hereafter.","params":[{"name":"options","type":"object","default":"{}","description":"New plugin defaults"}],"examples":["$.swap(\"defaults\", { ... });"]},{"name":"destroy","description":"Removes plugin instance.","examples":["$(\".target\").swap(\"destroy\");"]},{"name":"disable","description":"Disables instance.","examples":["$(\".target\").swap(\"disable\");"]},{"name":"enable","description":"Enables instance.","examples":["$(\".target\").swap(\"enable\");"]}],"name":"Swap","type":"widget","description":"A jQuery plugin for toggling states.","dependencies":["core.js","mediaquery.js","touch.js"],"css":[{"name":".fs-swap-element","type":"element","description":"Target Element"},{"name":".fs-swap-target","type":"element","description":"Toggled element"},{"name":".fs-swap-enabled","type":"modifier","description":"Indicates enabled state"},{"name":".fs-swap-active","type":"modifier","description":"Indicates active state"}],"use":"### Basic\n\nSwap toggles classes on groups of elements based on configuration options and user interaction. It is up to the developer to utilize the classes.\n\n```javascript\n$(\".target\").swap();\n```\n\n```markup\n<div class=\"target\" data-swap-target=\".toggle\">Toggle</div>\n<div class=\"toggle\">Target</div>\n```\n\n### Groups\n\nSwaps can be grouped together for a simple accordions or tabs.\n\n```markup\n<h4>Grouped</h4>\n<div class=\"target\" data-swap-target=\".toggle_1\" data-swap-group=\"group_1\">Toggle - 1</div>\n<div class=\"target\" data-swap-target=\".toggle_2\" data-swap-group=\"group_1\">Toggle - 2</div>\n\n<div class=\"toggle_1\">Target - 1</div>\n<div class=\"toggle_2\">Target - 2</div>\n```\n\n### Max Width\n\nSwaps will auto-enable and disable themselves if the `maxWidth` property is set.\n\n```javascript\n$(\".target\").swap({\n\tmaxWidth: \"740px\"\n});\n```\n\n```markup\n<div class=\"target\" data-swap-target=\".toggle\">Toggle</div>\n<div class=\"toggle\">Target</div>\n```\n","demo":"<style>\r\n\t.toggle { cursor: pointer; display: none; margin: 10px 0; }\r\n\t.toggle.fs-swap-enabled { display: block; }\r\n\t.toggle,\r\n\t.no-touch .toggle:hover { background: #999; }\r\n\t.toggle.fs-swap-active,\r\n\t.no-touch .toggle.fs-swap-active:hover { background: #d35400; }\r\n\r\n\t.toggle_target { background: #d35400; border-radius: 3px; color: #fff; height: 75px; line-height: 75px; margin: 10px 0; text-align: center; width: 100%; }\r\n\t.toggle_target.fs-swap-enabled.fs-swap-target { display: none; }\r\n\t.toggle_target.fs-swap-enabled.fs-swap-active { display: block; }\r\n</style>\r\n\r\n<script>\r\n\t$(function() {\r\n\t\t$(\".toggle\").swap();\r\n\t});\r\n</script>\r\n\r\n<h4>Basic</h4>\r\n<div class=\"button toggle\" data-swap-target=\".toggle_target_0\">Handle</div>\r\n<div class=\"toggle_target toggle_target_0\">Content</div>\r\n\r\n<h4>Grouped</h4>\r\n<div class=\"button toggle\" data-swap-target=\".toggle_target_1\" data-swap-group=\"toggle_group_1\">Handle 1</div>\r\n<div class=\"toggle_target toggle_target_1\">Content 1</div>\r\n\r\n<div class=\"button toggle\" data-swap-target=\".toggle_target_2\" data-swap-group=\"toggle_group_1\">Handle 2</div>\r\n<div class=\"toggle_target toggle_target_2\">Content 2</div>\r\n\r\n<h4>Grouped (no collapse)</h4>\r\n<div class=\"button toggle\" data-swap-active=\"true\" data-swap-options='{\"collapse\":false}' data-swap-target=\".toggle_target_3\" data-swap-group=\"toggle_group_2\">Handle 1</div>\r\n<div class=\"toggle_target toggle_target_3\">Content 1</div>\r\n\r\n<div class=\"button toggle\" data-swap-options='{\"collapse\":false}' data-swap-target=\".toggle_target_4\" data-swap-group=\"toggle_group_2\">Handle 2</div>\r\n<div class=\"toggle_target toggle_target_4\">Content 2</div>\r\n\r\n<h4>Max Width</h4>\r\n<div class=\"button toggle\" data-swap-options='{\"maxWidth\":\"740px\"}' data-swap-target=\".toggle_target_5\">Handle</div>\r\n<div class=\"toggle_target toggle_target_5\">Content</div>\r\n\r\n<h4>Linked Handles</h4>\r\n<div class=\"button toggle toggle_linked\" data-swap-target=\".toggle_target_6\" data-swap-linked='.toggle_linked'>Handle</div>\r\n<div class=\"toggle_target toggle_target_6\">Content</div>\r\n<div class=\"button toggle toggle_linked\" data-swap-target=\".toggle_target_6\" data-swap-linked='.toggle_linked'>Handle</div>"}