{"id":49,"date":"2010-03-31T13:15:13","date_gmt":"2010-03-31T18:15:13","guid":{"rendered":"https:\/\/xkahn.zoned.net\/blog\/?p=49"},"modified":"2010-03-31T13:15:13","modified_gmt":"2010-03-31T18:15:13","slug":"twisty-3-simple-and-lightweight-disclosure-triangles-for-the-web","status":"publish","type":"post","link":"https:\/\/xkahn.zoned.net\/blog\/2010\/03\/31\/twisty-3-simple-and-lightweight-disclosure-triangles-for-the-web\/","title":{"rendered":"Twisty 3: Simple and lightweight Disclosure Triangles for the web"},"content":{"rendered":"<link rel=\"stylesheet\" href=\"\/software\/twisty3\/twisty.css\" type=\"text\/css\" media=\"screen\"><\/link><link rel=\"stylesheet\" href=\"\/software\/twisty3\/twisty-print.css\" type=\"text\/css\" media=\"print\"><\/link><script src=\"\/software\/twisty3\/twisty.js\" type=\"text\/javascript\"><\/script><script src=\"\/software\/twisty3\/prototype.js\" type=\"text\/javascript\"><\/script><script src=\"\/software\/twisty3\/scriptaculous.js?load=effects\" type=\"text\/javascript\"><\/script> Twisties, otherwise known as \u00e2\u20ac\u0153Disclosure Triangles\u00e2\u20ac\u009d are little triangles (\u00e2\u2013\u00ba) that twist (\u00e2\u2013\u00bc) when clicked to hide or show content on the page. I\u00e2\u20ac\u2122m working on a web page that has a lot of content, but didn\u00e2\u20ac\u2122t want it all displayed all the time.  I searched around for a little while trying to find a nice example written by someone else, but came up empty. Probably other people thought this was too simple, or my searching skills failed me. Either way, I ended up writing this myself.  These were my requirements:\n<ul>\n<li><strong>Cross-platform<\/strong>:\u00c2\u00a0 It should work on my cell phone, on IE6, and real web browsers<\/li>\n<li><strong>Robust<\/strong>: If things go wrong, it shouldn\u00e2\u20ac\u2122t break. If the user doesn\u00e2\u20ac\u2122t have JavaScript enabled, it should work. No CSS? It should still work. A user script which hides or shows nodes out from under us? It should still work<\/li>\n<li><strong>Understandable<\/strong>: It should be easy for web developers to understand and add to their existing pages<\/li>\n<li><strong>Small<\/strong>: If this adds lots of code to a web site, it won&#8217;t be used and will slow downloads down<\/li>\n<li><strong>Attractive<\/strong>: It should \u00e2\u20ac\u0153feel\u00e2\u20ac\u009d nice. Lots of feedback to the user, and maybe some animation if appropriate. It shouldn\u00e2\u20ac\u2122t seem different from twisties the user has seen before<\/li>\n<li><strong>Accessible<\/strong>: Should work with the keyboard and with the mouse; printed pages should do the right thing\n<\/ul>\n<p>First, a demo:<\/p>\n<div style=\"background-color: #f0f0f0; border: 1px solid #707070; padding-left: 1em; margin: 3px;\" class=\"collapsible\"><a href=\"javascript:toggleTwisty('test1');\">Click this title to hide and show a portion of the page <img decoding=\"async\" class=\"twisty\" src=\"\/software\/twisty3\/twisty-down.gif\" alt=\"\" \/><\/a><\/p>\n<div id=\"test1\">\n<div>\n<div class=\"collapsible\"><a href=\"javascript:toggleTwisty('test2')\">Don&#8217;t open me! <img decoding=\"async\" class=\"twisty\" src=\"\/software\/twisty3\/twisty-down.gif\" alt=\"\" \/><\/a><\/p>\n<div id=\"test2\">\n<div><span style=\"color: red;\">Hey!  I told you not to open this section!<\/span><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p>        <img decoding=\"async\" src=\"https:\/\/xkahn.zoned.net\/media\/ben-icon-128x128.png\"><\/p>\n<table border=\"1\">\n<tr>\n<th>Name<\/th>\n<th>My numbers<\/th>\n<th>My letters<\/th>\n<\/tr>\n<tr>\n<td>Beth<\/td>\n<td>65, 5, 1, 6<\/td>\n<td>y<\/td>\n<\/tr>\n<tr>\n<td>Andy<\/td>\n<td>21, 12<\/td>\n<td>k,f,s<\/td>\n<\/tr>\n<tr>\n<td>Fred<\/td>\n<td>9<\/td>\n<td>k<\/td>\n<\/tr>\n<tr>\n<td>Mary<\/td>\n<td>100,000<\/td>\n<td>r, w, e<\/td>\n<\/tr>\n<\/table><\/div>\n<\/p><\/div>\n<\/div>\n<p><script type=\"text\/javascript\">\/\/ <![CDATA[\n    hideTwisty('test2');\n\/\/ ]]><\/script><\/p>\n<p>To get started, you can simply download the code:<\/p>\n<ul>\n<li>UNIX\/Linux: <a href=\"https:\/\/xkahn.zoned.net\/software\/twisty3\/twisty3.tar.gz\">twisty3.tar.gz<\/a> &#8211; 30K<\/li>\n<li>Windows: <a href=\"https:\/\/xkahn.zoned.net\/software\/twisty3\/twisty3.zip\">twisty3.zip<\/a> &#8211; 36K<\/li>\n<li>CVS\/SVN: <span style=\"color: grey;\">Not yet available<\/span><\/li>\n<\/ul>\n<h2>Set Up<\/h2>\n<p>If you want the <a href=\"https:\/\/xkahn.zoned.net\/software\/twisty3\/twisty.html\">smooth animation<\/a>, seen above, put the following into your <code>&lt;head&gt;<\/code>:<\/p>\n<pre><code class=\"html\">&lt;script type=\"text\/javascript\" src=\"twisty3\/twisty.js\"&gt;&lt;\/script&gt;\r\n&lt;script src=\"prototype.js\" type=\"text\/javascript\"&gt;&lt;\/script&gt;\r\n&lt;script src=\"scriptaculous.js?load=effects\" type=\"text\/javascript\"&gt;&lt;\/script&gt;\r\n&lt;link rel=\"stylesheet\" href=\"twisty.css\" type=\"text\/css\" media=\"screen\"&gt;&lt;\/link&gt;\r\n&lt;link rel=\"stylesheet\" href=\"twisty-print.css\" type=\"text\/css\" media=\"print\"&gt;&lt;\/link&gt;\r\n<\/code><\/pre>\n<p>If you want a <a href=\"https:\/\/xkahn.zoned.net\/software\/twisty3\/twisty-noslide.html\">smaller footprint, or don&#8217;t like the exposure animation<\/a>, put the following into your <code>&lt;head&gt;<\/code> tag instead:<\/p>\n<pre><code class=\"html\">&lt;script type=\"text\/javascript\" src=\"twisty3\/twisty.js\"&gt;&lt;\/script&gt;\r\n&lt;link rel=\"stylesheet\" href=\"twisty.css\" type=\"text\/css\" media=\"screen\"&gt;&lt;\/link&gt;\r\n&lt;link rel=\"stylesheet\" href=\"twisty-print.css\" type=\"text\/css\" media=\"print\"&gt;&lt;\/link&gt;\r\n<\/code><\/pre>\n<h2>Defining a section to be hidden<\/h2>\n<p>Each section needs a unique id, a title, and the content of the section to be hidden.  Then, format that section like this:<\/p>\n<pre><code class=\"html\">&lt;div class=\"collapsible\"&gt;\r\n  &lt;a href=\"javascript:toggleTwisty('uniqueid');\"&gt;\r\n    The Section Title\r\n    &lt;img class=\"twisty\" src=\"twisty-down.gif\"&gt;\r\n  &lt;\/a&gt;\r\n  &lt;div id=\"uniqueid\"&gt;\r\n    &lt;div&gt;\r\n      Section Content\r\n    &lt;\/div&gt;\r\n  &lt;\/div&gt;\r\n&lt;\/div&gt;<\/code><\/pre>\n<h2>Hiding sections by default<\/h2>\n<p>If you want a section to be hidden by default, add after the section&#8217;s &lt;div&gt;:<\/p>\n<pre><code class=\"html\">&lt;script type=\"text\/javascript\"&gt;\r\n  hideTwisty('uniqueid');\r\n&lt;script&gt;<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Twisties, otherwise known as \u00e2\u20ac\u0153Disclosure Triangles\u00e2\u20ac\u009d are little triangles (\u00e2\u2013\u00ba) that twist (\u00e2\u2013\u00bc) when clicked to hide or show content on the page. I\u00e2\u20ac\u2122m working on a web page that has a lot of content, but didn\u00e2\u20ac\u2122t want it all displayed all the time. I searched around for a little while trying to find a\u2026 <span class=\"read-more\"><a href=\"https:\/\/xkahn.zoned.net\/blog\/2010\/03\/31\/twisty-3-simple-and-lightweight-disclosure-triangles-for-the-web\/\">Read More &raquo;<\/a><\/span><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[],"class_list":["post-49","post","type-post","status-publish","format-standard","hentry","category-html"],"_links":{"self":[{"href":"https:\/\/xkahn.zoned.net\/blog\/wp-json\/wp\/v2\/posts\/49","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/xkahn.zoned.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/xkahn.zoned.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/xkahn.zoned.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/xkahn.zoned.net\/blog\/wp-json\/wp\/v2\/comments?post=49"}],"version-history":[{"count":14,"href":"https:\/\/xkahn.zoned.net\/blog\/wp-json\/wp\/v2\/posts\/49\/revisions"}],"predecessor-version":[{"id":63,"href":"https:\/\/xkahn.zoned.net\/blog\/wp-json\/wp\/v2\/posts\/49\/revisions\/63"}],"wp:attachment":[{"href":"https:\/\/xkahn.zoned.net\/blog\/wp-json\/wp\/v2\/media?parent=49"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xkahn.zoned.net\/blog\/wp-json\/wp\/v2\/categories?post=49"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xkahn.zoned.net\/blog\/wp-json\/wp\/v2\/tags?post=49"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}