{"id":12,"date":"2007-02-27T17:09:53","date_gmt":"2007-02-27T22:09:53","guid":{"rendered":"https:\/\/xkahn.zoned.net\/blog\/2007\/02\/27\/twisty-html\/"},"modified":"2007-02-28T12:25:56","modified_gmt":"2007-02-28T17:25:56","slug":"twisty-html","status":"publish","type":"post","link":"https:\/\/xkahn.zoned.net\/blog\/2007\/02\/27\/twisty-html\/","title":{"rendered":"Twisty HTML"},"content":{"rendered":"<p><strong>Edit: <\/strong>I&#8217;ve created an updated version of this library and described it at <a href=\"https:\/\/xkahn.zoned.net\/blog\/2007\/02\/28\/even-more-twisty-html\/\">Even More Twisty HTML<\/a>. I don&#8217;t recommend using the version described below because of the issues people have reported.<\/p>\n<p>Twisties, otherwise known as &#8220;Disclosure Triangles&#8221; are little triangles (\u00e2\u2013\u00ba) that twist (\u00e2\u2013\u00bc) when clicked to hide or show content on the page.  I&#8217;m working on a web page that has a lot of content, but didn&#8217;t want it all displayed all the time.<\/p>\n<p>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.<\/p>\n<p>So first I came up with some requirements for myself:<\/p>\n<ul>\n<li>It needed to be robust.  If things go wrong, it shouldn&#8217;t break.  If the user doesn&#8217;t 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>It should be small, and run quickly.<\/li>\n<li>It should be easy for web developers to understand.<\/li>\n<li>It should &#8220;feel&#8221; nice.  Lots of feedback to the user, and maybe some animation if appropriate.  It shouldn&#8217;t seem different from twisties the user has seen before.<\/li>\n<li>It should be extensible so others can do things with it I hadn&#8217;t imagined.<\/li>\n<\/ul>\n<p>I have two results.  One uses <a href=\"http:\/\/script.aculo.us\/downloads\">script.aculo.us<\/a> to show <a href=\"https:\/\/xkahn.zoned.net\/software\/twisty\/twisty.html\">smooth animations<\/a>, and the <a href=\"https:\/\/xkahn.zoned.net\/software\/twisty\/twisty-noslide.html\">other doesn&#8217;t<\/a>.  In both cases, the underlying code is the same.  My twisty library checks to see if script.aculo.us is available.  If it is, you&#8217;ll see animations.  If it isn&#8217;t, you won&#8217;t.<\/p>\n<p>So how do you use it?<\/p>\n<p>First, you need to download <a href=\"http:\/\/https:\/\/xkahn.zoned.net\/software\/twisty\/twisty.js\">twisty.js<\/a> and the four twisty images: <a href=\"http:\/\/https:\/\/xkahn.zoned.net\/software\/twisty\/twisty-hidden.gif\">hidden<\/a>, <a href=\"https:\/\/xkahn.zoned.net\/software\/twisty\/twisty-down.gif\">down<\/a>, the <a href=\"https:\/\/xkahn.zoned.net\/software\/twisty\/twisty-do-hidden.gif\">hidden animation<\/a>, and  the <a href=\"https:\/\/xkahn.zoned.net\/software\/twisty\/twisty-do-down.gif\">down animation<\/a>.  Save them into the same directory as your web page.<\/p>\n<p>Next, in your page header, include the following to load the javascript:<\/p>\n<p><code>&lt;script type=\"text\/javascript\" src=\"twisty.js\"&gt;&lt;\/script&gt;<\/code><\/p>\n<p>If you want animations, you need to download and include the script.aculo.us scripts too.<\/p>\n<p>In your stylsheet, you should include:<br \/>\n<code><br \/>\n.twisty:hover {<br \/>\nbackground-color: #f0f0f0;<br \/>\nborder: 1px solid #e0e0e0;<br \/>\nmargin-left: -1px;<br \/>\n}<br \/>\n.twisty {<br \/>\ncursor: hand;<br \/>\ncursor: pointer;<br \/>\n}<br \/>\n<\/code><\/p>\n<p>To make sure you get a nice mouse cursor over a twisty, and also the image highlights nicely when you hover over it.<\/p>\n<p>Next, you need to initialize the twisties in your &lt;body&gt; tag.  This is only needed if you want to support users not using Javascript and want to have blocks that are hidden by default.<\/p>\n<p><code>&lt;body onload=\"initTwisty();\"&gt;<br \/>\n<\/code><\/p>\n<p>To create a twisty, you need to put the whole thing inside a &lt;div&gt;, Add a label, the image with a class of twisty, reference the correct twisty image (either twisty-down.gif or twisty-hidden.gif), and an onclick handler referencing a unique id.  Then put a &lt;div&gt; with a class of collapsible and the id you chose before in the onclick handler.  Inside that put another div.  (This last div is needed by script.aculo.us for some reason.)<\/p>\n<p><code>&lt;div&gt;Some Label &lt;img class=\"twisty\" src=\"twisty-down.gif\" onclick=\"toggleTwisty('childid'); return false;\"&gt;<br \/>\n&lt;div class=\"collapsible\" id=\"childid\"&gt;<br \/>\n&lt;div&gt;Some content&lt;\/div&gt;<br \/>\n&lt;\/div&gt;<br \/>\n&lt;\/div&gt;<\/code><\/p>\n<p>Let me know if you can think of anything to improve this widget, or it&#8217;s description.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Edit: I&#8217;ve created an updated version of this library and described it at Even More Twisty HTML. I don&#8217;t recommend using the version described below because of the issues people have reported. Twisties, otherwise known as &#8220;Disclosure Triangles&#8221; are little triangles (\u00e2\u2013\u00ba) that twist (\u00e2\u2013\u00bc) when clicked to hide or show content on the page.\u2026 <span class=\"read-more\"><a href=\"https:\/\/xkahn.zoned.net\/blog\/2007\/02\/27\/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-12","post","type-post","status-publish","format-standard","hentry","category-html"],"_links":{"self":[{"href":"https:\/\/xkahn.zoned.net\/blog\/wp-json\/wp\/v2\/posts\/12","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=12"}],"version-history":[{"count":0,"href":"https:\/\/xkahn.zoned.net\/blog\/wp-json\/wp\/v2\/posts\/12\/revisions"}],"wp:attachment":[{"href":"https:\/\/xkahn.zoned.net\/blog\/wp-json\/wp\/v2\/media?parent=12"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xkahn.zoned.net\/blog\/wp-json\/wp\/v2\/categories?post=12"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xkahn.zoned.net\/blog\/wp-json\/wp\/v2\/tags?post=12"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}