{"id":13,"date":"2007-02-28T12:17:21","date_gmt":"2007-02-28T17:17:21","guid":{"rendered":"https:\/\/xkahn.zoned.net\/blog\/2007\/02\/28\/even-more-twisty-html\/"},"modified":"2007-06-18T12:11:49","modified_gmt":"2007-06-18T17:11:49","slug":"even-more-twisty-html","status":"publish","type":"post","link":"https:\/\/xkahn.zoned.net\/blog\/2007\/02\/28\/even-more-twisty-html\/","title":{"rendered":"Even more twisty HTML"},"content":{"rendered":"<p>Whew!  Yesterday I received a number of comments and complaints about my small twisty (disclosure triangle) library.  To review:<\/p>\n<ul>\n<li>It didn&#8217;t work in Internet Explorer.  <em>(Not too surprising since I don&#8217;t have access to a Windows machine for testing.)<\/em><\/li>\n<li>It was a little ugly.  <em>(Okay, no one said that, but I think it was implied.)<\/em><\/li>\n<li> The hidden sections would display for a moment before being hidden.<\/li>\n<li>It wasn&#8217;t keyboard accessible.<\/li>\n<li>I had a typo in the script.<\/li>\n<li>The hiding animation wasn&#8217;t the same speed as the twisty animation.<\/li>\n<\/ul>\n<p>So I&#8217;ve tried again with some good ideas from the <a href=\"http:\/\/swat.silverorange.com\/demo\/index.php?demo=Disclosure\">SWAT tooklit<\/a>.  You can try the <a href=\"http:\/\/script.aculo.us\/\">script.aculo.us<\/a> <a href=\"https:\/\/xkahn.zoned.net\/software\/twisty2\/twisty.html\">animated version<\/a> or the <a href=\"https:\/\/xkahn.zoned.net\/software\/twisty2\/twisty-noslide.html\">plain non-animated version<\/a>.  You can also simply <a href=\"https:\/\/xkahn.zoned.net\/software\/twisty2\/twisty2.tar.gz\">download the whole thing as a tar file<\/a> to play with.<\/p>\n<p>To use this on your own, you need to include the twisty.js file in your code:<\/p>\n<p><code>&lt;script type=\"text\/javascript\" src=\"twisty.js\"&gt;&lt;\/script&gt;<\/code><\/p>\n<p>You should also include the two external style sheets:<\/p>\n<p><code>&lt;link rel=\"stylesheet\" href=\"twisty.css\" type=\"text\/css\" media=\"screen\"&gt;&lt;\/link&gt;<br \/>\n&lt;link rel=\"stylesheet\" href=\"twisty-print.css\" type=\"text\/css\" media=\"print\"&gt;&lt;\/link&gt;<\/code><\/p>\n<p>You no longer need any changes to your &lt;body&gt; tag.<\/p>\n<p>To define a twisty, use this template:<\/p>\n<p><code>&lt;div class=\"collapsible\"&gt;&lt;a href=\"javascript:toggleTwisty('uniqueid');\"&gt;The Section Title&lt;img class=\"twisty\" src=\"twisty-down.gif\"&gt;&lt;\/a&gt;<br \/>\n&lt;div id=\"uniqueid\"&gt;<br \/>\n&lt;div&gt;<br \/>\nSection Content<br \/>\n&lt;\/div&gt;<br \/>\n&lt;\/div&gt;<br \/>\n&lt;\/div&gt;<\/code><\/p>\n<p>If you want the section to default to hidden, simpy add this code to the end of the above code snippet. (after the last &lt;\/div&gt;)<\/p>\n<p><code>&lt;script type=\"text\/javascript\"&gt;<br \/>\nhideTwisty('uniqueid');<br \/>\n&lt;\/script&gt;<\/code><\/p>\n<p>Hopefully, this version works better.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Whew! Yesterday I received a number of comments and complaints about my small twisty (disclosure triangle) library. To review: It didn&#8217;t work in Internet Explorer. (Not too surprising since I don&#8217;t have access to a Windows machine for testing.) It was a little ugly. (Okay, no one said that, but I think it was implied.)\u2026 <span class=\"read-more\"><a href=\"https:\/\/xkahn.zoned.net\/blog\/2007\/02\/28\/even-more-twisty-html\/\">Read More &raquo;<\/a><\/span><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[],"class_list":["post-13","post","type-post","status-publish","format-standard","hentry","category-html"],"_links":{"self":[{"href":"https:\/\/xkahn.zoned.net\/blog\/wp-json\/wp\/v2\/posts\/13","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\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/xkahn.zoned.net\/blog\/wp-json\/wp\/v2\/comments?post=13"}],"version-history":[{"count":1,"href":"https:\/\/xkahn.zoned.net\/blog\/wp-json\/wp\/v2\/posts\/13\/revisions"}],"predecessor-version":[{"id":48,"href":"https:\/\/xkahn.zoned.net\/blog\/wp-json\/wp\/v2\/posts\/13\/revisions\/48"}],"wp:attachment":[{"href":"https:\/\/xkahn.zoned.net\/blog\/wp-json\/wp\/v2\/media?parent=13"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xkahn.zoned.net\/blog\/wp-json\/wp\/v2\/categories?post=13"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xkahn.zoned.net\/blog\/wp-json\/wp\/v2\/tags?post=13"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}