{"_id":"5734c58d7b9859320047f47c","parentDoc":null,"user":"5730eaf719c1e00e006d215f","category":{"_id":"5734b41b9c2cf82900b243ee","__v":0,"project":"5730eb946b55e93400b32aae","version":"5730eb946b55e93400b32ab1","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-05-12T16:49:31.689Z","from_sync":false,"order":9999,"slug":"components","title":"Components"},"project":"5730eb946b55e93400b32aae","__v":7,"version":{"_id":"5730eb946b55e93400b32ab1","project":"5730eb946b55e93400b32aae","__v":4,"createdAt":"2016-05-09T19:57:08.646Z","releaseDate":"2016-05-09T19:57:08.646Z","categories":["5730eb946b55e93400b32ab2","5734b41b9c2cf82900b243ee","5734c6986d9a38200073dd32","5734cea86d9a38200073dd5a"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"0.3.25","version":"0.3.25"},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-05-12T18:03:57.749Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":2,"body":"The ExpandCollapse component has `preserveChildElements` set to `true`, so you can put your content in the container, then make it expandable/collapsable without blowing away the content inside.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Example Usage\"\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<div class=\\\"expand-collapse-test-container\\\">\\n  <!--Put your long content you want to expand/collapse in the container-->\\n  <p>\\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut porttitor \\n    eros. In nec nulla quam. Nullam at vulputate ipsum. Curabitur elementum\\n    lectus sit amet orci placerat ultrices. Phasellus ipsum tellus, facilisis\\n    rhoncus maximus sit amet, sollicitudin quis felis. Morbi a ipsum congue \\n    neque hendrerit mollis a ac turpis. Pellentesque habitant morbi tristique\\n    senectus et netus et malesuada fames ac turpis egestas. Sed auctor metus \\n    sed nulla aliquet, in sagittis tellus sodales. Etiam nec neque eu enim\\n    consectetur vehicula.\\n  </p>\\n  <p>\\n    Nulla volutpat ante ut odio posuere dapibus. Nunc justo lacus, accumsan a\\n    lobortis eget, commodo sit amet ante. Donec mattis mauris eget eros luctus\\n    iaculis. Aenean vel aliquam nisi. Morbi fringilla imperdiet ultrices. Cras\\n    eget sem eleifend, blandit enim tempor, convallis augue. Phasellus id\\n    sagittis purus, a accumsan velit.\\n  </p>\\n</div>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"// Pull in the library\\nconst UI = require('jibe-juice');\\n\\n// Instantiate a component, pass the selector of the container to insert component into and the opts\\nconst container = new UI.ExpandCollapse('.expand-collapse-test-container',\\n'.toggle', {\\n  toggledClass: 'i-am-toggled',\\n  untoggledClass: 'i-am-NOT-toggled'\\n});\\n\\n// Render the DOM for the ExpandCollapse component\\ncontainer.render();\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"params\"\n}\n[/block]\n\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Name\",\n    \"h-1\": \"Type\",\n    \"h-2\": \"Default\",\n    \"h-3\": \"Description\",\n    \"0-0\": \"el\",\n    \"0-3\": \"A string of the selector for the element to put the component in\",\n    \"1-0\": \"opts\",\n    \"1-1\": \"object\",\n    \"1-2\": \"{}\",\n    \"1-3\": \"A catch all for various options. See the opts table below for options specific to this component.\",\n    \"2-0\": \"toggleSelector\",\n    \"2-1\": \"string\",\n    \"0-1\": \"string\",\n    \"0-2\": \"undefined\",\n    \"2-2\": \"undefined\",\n    \"2-3\": \"A string for the selector to find the element you'd like to click to toggle expand/collapse\"\n  },\n  \"cols\": 4,\n  \"rows\": 3\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"opts\"\n}\n[/block]\n\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Name\",\n    \"h-1\": \"Type\",\n    \"h-2\": \"Default\",\n    \"h-3\": \"Description\",\n    \"1-0\": \"untoggledClass\",\n    \"1-1\": \"string\",\n    \"1-2\": \"undefined\",\n    \"1-3\": \"The class to apply when toggled is false\",\n    \"h-4\": \"Description\",\n    \"1-4\": \"Test\",\n    \"0-0\": \"toggledClass\",\n    \"0-2\": \"undefined\",\n    \"0-1\": \"string\",\n    \"0-3\": \"The class to apply when toggled is true\"\n  },\n  \"cols\": 4,\n  \"rows\": 2\n}\n[/block]","excerpt":"","slug":"expandcollapse","type":"basic","title":"ExpandCollapse"}
The ExpandCollapse component has `preserveChildElements` set to `true`, so you can put your content in the container, then make it expandable/collapsable without blowing away the content inside. [block:api-header] { "type": "basic", "title": "Example Usage" } [/block] [block:code] { "codes": [ { "code": "<div class=\"expand-collapse-test-container\">\n <!--Put your long content you want to expand/collapse in the container-->\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut porttitor \n eros. In nec nulla quam. Nullam at vulputate ipsum. Curabitur elementum\n lectus sit amet orci placerat ultrices. Phasellus ipsum tellus, facilisis\n rhoncus maximus sit amet, sollicitudin quis felis. Morbi a ipsum congue \n neque hendrerit mollis a ac turpis. Pellentesque habitant morbi tristique\n senectus et netus et malesuada fames ac turpis egestas. Sed auctor metus \n sed nulla aliquet, in sagittis tellus sodales. Etiam nec neque eu enim\n consectetur vehicula.\n </p>\n <p>\n Nulla volutpat ante ut odio posuere dapibus. Nunc justo lacus, accumsan a\n lobortis eget, commodo sit amet ante. Donec mattis mauris eget eros luctus\n iaculis. Aenean vel aliquam nisi. Morbi fringilla imperdiet ultrices. Cras\n eget sem eleifend, blandit enim tempor, convallis augue. Phasellus id\n sagittis purus, a accumsan velit.\n </p>\n</div>", "language": "html" } ] } [/block] [block:code] { "codes": [ { "code": "// Pull in the library\nconst UI = require('jibe-juice');\n\n// Instantiate a component, pass the selector of the container to insert component into and the opts\nconst container = new UI.ExpandCollapse('.expand-collapse-test-container',\n'.toggle', {\n toggledClass: 'i-am-toggled',\n untoggledClass: 'i-am-NOT-toggled'\n});\n\n// Render the DOM for the ExpandCollapse component\ncontainer.render();", "language": "javascript" } ] } [/block] [block:api-header] { "type": "basic", "title": "params" } [/block] [block:parameters] { "data": { "h-0": "Name", "h-1": "Type", "h-2": "Default", "h-3": "Description", "0-0": "el", "0-3": "A string of the selector for the element to put the component in", "1-0": "opts", "1-1": "object", "1-2": "{}", "1-3": "A catch all for various options. See the opts table below for options specific to this component.", "2-0": "toggleSelector", "2-1": "string", "0-1": "string", "0-2": "undefined", "2-2": "undefined", "2-3": "A string for the selector to find the element you'd like to click to toggle expand/collapse" }, "cols": 4, "rows": 3 } [/block] [block:api-header] { "type": "basic", "title": "opts" } [/block] [block:parameters] { "data": { "h-0": "Name", "h-1": "Type", "h-2": "Default", "h-3": "Description", "1-0": "untoggledClass", "1-1": "string", "1-2": "undefined", "1-3": "The class to apply when toggled is false", "h-4": "Description", "1-4": "Test", "0-0": "toggledClass", "0-2": "undefined", "0-1": "string", "0-3": "The class to apply when toggled is true" }, "cols": 4, "rows": 2 } [/block]