collapsible-panels-tutorial
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
912
On Slideshare
912
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
2
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Javascript animated collapsible panels without any frameworks 1 Javascript animated collapsible panels without any frameworks By Armand Niculescu If you need to make collapsible panels that remember their state, but don’t want to use any javascript framework, this tutorial will help you do this with no headaches - and you’ll learn some neat javascript tricks too! In case you’re wondering why no frameworks, the reason is two-fold. • First, although frameworks are nice, they’re BIG. jQuery weighs over 50Kb 1; it’s not much if you’re building an entire web app, but if you’re only looking for some specif- ic effect, it’s overkill considering that you can achieve the same thing in less that 3Kb. • Second, by doing it yourself, you have the potential to actually learn more about javascript (only if you want to — the code I’m presenting is pretty much plug-and- play) and reuse the concepts to do other things - like a collapsible tree menu for ex- ample. Features at a glance • works with any number of panels in a page; • plug-and-play – can be used with little or no tweaks; • shows different arrows and style for the expanded/collapsed state; • animated transitions; • each panel’s state is saved and remembered between sessions; • tested in IE6, IE7, IE8, Firefox 3, Chrome, Safari 4 and Opera 9. Start with layout and style For this tutorial we’ll use a minimal style; since the article is not about CSS, I will only briefly cover this. HTML The required HTML for a panel is very simple: 1. <div class="panel"> 2. <h2>One panel</h2> 1 To add insult to injury, if you are using a CMS or blog with plugins, they sometimes use different frameworks, so the page ends up loading jQuery, MooTools and Scriptaculous to display some simple effects. ©2009 RichNetApps.com
  • 2. Javascript animated collapsible panels without any frameworks 2 3. <div class="panelcontent"> 4. ... content goes here ... 5. </div> 6. </div> We have a DIV that encloses the title (in our case a H2 tag, but you could use something else) and another DIV that will hold the actual content. We need this kind of nested struc- ture, but if anyone thinks of a more semantic approach, it can be changed. CSS For our panel we will use two main classes, .panel (for expanded state) and .panelcollapsed (for the collapsed state), like this: 1. .panel, .panelcollapsed 2. { 3. background: #eee; 4. margin: 5px; 5. padding: 0px 0px 5px; 6. width: 300px; 7. border: 1px solid #999; 8. -moz-border-radius: 4px; 9. -webkit-border-radius: 4px; 10. } Feel free to change the layout as you see fit. Note that in the example above Firefox and Webkit-based browsers (Chrome and Safari) will also get some nice rounded corners. For headings I’m using an arrow icon on the background, the rest of the style is pretty plain: 11. .panel h2, .panelcollapsed h2 12. { 13. font-size: 18px; 14. font-weight: normal; 15. margin: 0px; 16. padding: 4px; 17. background: #CCC url(arrow-up.gif) no-repeat 280px; 18. border-bottom: 1px solid #999; 19. -moz-border-radius: 3px; 20. -webkit-border-radius: 3px; 21. border-top: 1px solid #FFF; 22. border-right: 1px solid #FFF; 23. border-left: 1px solid #FFF; 24. } For a collapsed panel, we want to change the style slightly and change the arrow direction: 25. .panelcollapsed h2 26. { 27. background: #CCC url(arrow-dn.gif) no-repeat 280px; 28. border-color: #CCC; 29. } ©2009 RichNetApps.com
  • 3. Javascript animated collapsible panels without any frameworks 3 I also wanted to add a little ‘rollover’ effect on the heading (not visible in IE6): 30. .panel h2:hover, .panelcollapsed h2:hover { background-color: #A9BCEF; } Finally, we’ll add just a little style for the panel content: 31. .panelcontent 32. { 33. background: #EEE; 34. overflow: hidden; 35. } 36. 37. .panelcollapsed .panelcontent { display: none; } Adding the interactivity Because I wanted the HTML to be as simple as possible and to work with any number of panels, I did not add links with onclick handlers (e.g. <a href="#" onclick="toggle()">) and I also didn’t want to have to add IDs to panels. Therefore, I made the script ’smart’ enough to discover the panels and add the onclick handlers by itself. This is not as hard as it may seem: 1. var PANEL_NORMAL_CLASS = "panel"; 2. var PANEL_COLLAPSED_CLASS = "panelcollapsed"; 3. var PANEL_HEADING_TAG = "h2"; 4. 5. function setUpPanels() 6. { 7. var headingTags = document.getElementsByTagName(PANEL_HEADING_TAG); 8. 9. for (var i=0; i < headingTags.length; i++) 10. { 11. var el = headingTags[i]; 12. if (el.parentNode.className != PANEL_NORMAL_CLASS && el.parentNode.className != PANEL_COLLAPSED_CLASS) 13. continue; 14. el.onclick = function() 15. { 16. var target = this.parentNode; 17. var collapsed = target.className == PANEL_COLLAPSED_CLASS; 18. target.parentNode.className = collapsed ? PANEL_NORMAL_CLASS : PANEL_COLLAPSED_CLASS; 19. }; 20. } 21. } 22. 23. // Register setUpPanels to be executed on load 24. if (window.addEventListener) 25. window.addEventListener("load", setUpPanels, false); 26. else 27. if (window.attachEvent) 28. window.attachEvent("onload", setUpPanels); ©2009 RichNetApps.com
  • 4. Javascript animated collapsible panels without any frameworks 4 First, I’m setting up some constants, just in case you’ll want to use different tags for the heading or different class names. The setUpPanels function works like this: 1. using getElementsByTagName we get all H2 headings in the page and collect them into an array; 2. we go through each collected element: 1. test to see if it’s inside a panel by accessing its parent class name, skip if it’s not panel or panelcollapsed. 2. add an onclick handler for the heading. This will work fine even without a link, although the hover effect will not work in IE6. The function does the following: 1. get the heading’s parent, that’s the panel itself. 2. get its class name, switch between panel and panelcollapsed. Finally, we need a way to make the setUpPanels to execute upon window load. Now, in- stead of using a <body onload="setUpPanels()"> construct, we’ll use something more clever. Unfortunately, as always IE plays different, so we’ll have to use two methods: the correct DOM method via addEventListener and the IE way with attachEvent. Making changes persistent To be really useful for the user, the expanded/collapsed preferences should be saved in a cookie, so that the next time the page is loaded, the panels are already expanded or collapsed. For this, first we’ll use an object called panelsStatus that will keep the expanded/collapsed status for each panel; it will act as an associative array or a hash. The ‘key’ will be the panel’s name (the text in the H2 tag) and the value will be “true” for an expanded panel and “false” for a collapsed one. To keep code neat, we’ll also define our cookie name with 29. var PANEL_COOKIE_NAME = "panels"; Saving settings Saving will take place each time a panel is toggled. 30. function saveSettings(key, value) 31. { 32. panelsStatus[key] = value; 33. 34. var panelsData = []; 35. for (var key in panelsStatus) 36. panelsData.push(key+":"+panelsStatus[key]); 37. 38. var today = new Date(); 39. var expirationDate = new Date(today.getTime() + 365 * 1000 * 60 * 60 * 24); 40. ©2009 RichNetApps.com
  • 5. Javascript animated collapsible panels without any frameworks 5 41. document.cookie = PANEL_COOKIE_NAME + "=" + escape(panelsData.join("|")) + ";expires=" + expirationDate.toGMTString(); 42. } Step by step, here’s what the function does: 1. get the modified key-value pair and put it in the panelsStatus object; 2. go through all elements in the object and combine entries in a string like this: “key:value“, put in a temporary array; 3. get today date and add one year to it (that will be the cookie expiration date); 4. join the temporary array elements into one string like “key1:value1|key2:value2| key3:value3” and write in the cookie.The cookie string will look like this: panels=One%20panel%3Afalse;expires=Sun, 11 Apr 2010 09:40:22 GMT For simplicity I’ve used “:” (colon) and “|” (pipe) as separators. If you think you’re likely to encounter those in the panel name, you can replace them with any weird character you can think of. Loading settings Loading will be done once, when the page is loaded. 43. function loadSettings() 44. { 45. panelsStatus = {}; 46. 47. var start = document.cookie.indexOf(PANEL_COOKIE_NAME + "="); 48. if (start == -1) return; 49. start += PANEL_COOKIE_NAME.length+1; 50. var end = document.cookie.indexOf(";", start); 51. if (end == -1) end = document.cookie.length-1; 52. 53. var cookieValue = unescape(document.cookie.substring(start, end)); 54. var panelsData = cookieValue.split("|"); 55. 56. for (var i=0; i< panelsData.length; i++) 57. { 58. var pair = panelsData[i].split(":"); 59. panelsStatus[pair[0]] = pair[1]; 60. } 61. } Here’s what the code does: 1. create the panelsStatus object; 2. find the cookie name in the document.cookie string, return if not found; 3. find the end of the cookie value string (before the “;expires=“); 4. take the cookie value and split by by the “|” character, put in a temporary array; 5. go through each element in the array, split by “:” and save in the panelsStatus ob- ject as key/value pair. ©2009 RichNetApps.com
  • 6. Javascript animated collapsible panels without any frameworks 6 Animating the transition For some reason, people think animation is difficult in browser. It’s not. Think of it this way: any property that you can set via CSS, you can alter dynamically in javascript. To anim- ate, you just need to call a function repeatedly, and this is most easily achieved with setTimeout or setInterval(). Preparing the transition First, let’s define some new constants: 62. var PANEL_CONTENT_CLASS = "panelcontent"; 63. var PANEL_ANIMATION_DELAY = 20; /*ms*/ 64. var PANEL_ANIMATION_STEPS = 10; So, we have defined the class name for the panel content, the delay in milliseconds between two calls to the animation function and the total number of steps to use for the an- imation. To keep things as flexible as possible, I wanted the script to work easily regardless of the panel height, so when animating, we’ll dynamically change the height of the panel content (that’s why it needs the overflow:hidden definition in CSS). If you want all panels to have the same height, maybe with scrollable content, I suggest adding another DIV in the panel con- tent and setting its height and overflow. 65. function animateTogglePanel(panel, expanding) 66. { 67. var elements = panel.getElementsByTagName("div"); 68. var panelContent = null; 69. for (var i=0; i < elements.length; i++) 70. { 71. if (elements[i].className == PANEL_CONTENT_CLASS) 72. { 73. panelContent = elements[i]; 74. break; 75. } 76. } 77. 78. panelContent.style.display = "block"; 79. var contentHeight = panelContent.offsetHeight; 80. 81. if (expanding) 82. panelContent.style.height = "0px"; 83. 84. var stepHeight = contentHeight / PANEL_ANIMATION_STEPS; 85. var direction = (!expanding ? -1 : 1); 86. 87. setTimeout(function(){animateStep(panelContent,1,stepHeight,direction)}, PANEL_ANIMATION_DELAY); 88. } ©2009 RichNetApps.com
  • 7. Javascript animated collapsible panels without any frameworks 7 This function expects two parameters - a reference to the panel that needs to be animated and whether it should be an expanding or collapsing animation. 1. First, it finds the DIV that has the panelcontent class by collecting all descendant DIVs and going through them until it finds the one that has the right class name. This process could have been simplified a little by using getElementsByClassName, but that function is not supported by IE (surprise, surprise). 2. Then, we need to get the height of the panel content, so we make sure it’s displayed by setting its display property to “block” and read its height with offsetHeight property. offsetHeight return its total height, meaning defined height + paddings + border widths, so you should not define any paddings or borders in the panelcontent class, or you’ll get inaccurate results. 3. if the animation is for expanding, we need the content visible, but it has to start with a height of 0. 4. calculate by how much the panel should expand or contract on each step by divid- ing the total height by the number of steps, and the direction - positive for expan- sion, negative for contraction 5. set the timeout - here’s a tricky thing: we can’t call animateStep function directly because we need to pass the reference to the panel content to it. So we set an an- onymous function, which in turn will call animateStep. It’s confusing, but it works - for more details, read about setInterval callback arguments on Mozilla Developer. The next function is called every 20 milliseconds. It receives a reference to the panel con- tent, the current step (iteration number), the step height and direction. 89. function animateStep(panelContent, iteration, stepHeight, direction) 90. { 91. if (iteration < PANEL_ANIMATION_STEPS) 92. { 93. panelContent.style.height = Math.round(((direction > 0) ? iteration : PANEL_ANIMATION_STEPS - iteration) * stepHeight) +"px"; 94. iteration++; 95. setTimeout(function() {animateStep(panelContent,iteration,stepHeight,direction)}, PANEL_ANIMATION_DELAY); 96. } 97. else 98. { 99. panelContent.parentNode.className = (direction < 0) ? PANEL_COLLAPSED_CLASS : PANEL_NORMAL_CLASS; 100. panelContent.style.display = panelContent.style.height = ""; 101. } 102. } What it does: 1. checks if the current iteration is smaller than the total number of iterations; 2. if it is: 1. change the panel content height to be equal to iteration number multiplied by step height; reverse if it’s a collapsing animation;for example, consider it- ©2009 RichNetApps.com
  • 8. Javascript animated collapsible panels without any frameworks 8 eration 2 with a step height of 5px, expanding. Panel content height becomes 2*5=10px; at iteration 3 it will be 3*5=15px and so on;for a collapsing anima- tion, if the total number of steps is 10, at iteration 2 we’d have (10-2)*5 =40px, iteration 3 is (10-3)*5=35px. 2. set the timeout to call animateStep function again after the specified delay. 3. if it’s not: 1. switch the class name for the panel (panel content’s parent). 2. clear any inline styles we’ve set. Putting it all together That’s it really. All we need to do now is to integrate the load/save and animation back into our first code. The final javascript will look like this: 1. var PANEL_NORMAL_CLASS = "panel"; 2. var PANEL_COLLAPSED_CLASS = "panelcollapsed"; 3. var PANEL_HEADING_TAG = "h2"; 4. var PANEL_CONTENT_CLASS = "panelcontent"; 5. var PANEL_COOKIE_NAME = "panels"; 6. var PANEL_ANIMATION_DELAY = 20; /*ms*/ 7. var PANEL_ANIMATION_STEPS = 10; 8. 9. function setUpPanels() 10. { 11. loadSettings(); 12. 13. // get all headings 14. var headingTags = document.getElementsByTagName(PANEL_HEADING_TAG); 15. 16. // go through all tags 17. for (var i=0; i < headingTags.length; i++) 18. { 19. var el = headingTags[i]; 20. 21. // make sure it's the heading inside a panel 22. if (el.parentNode.className != PANEL_NORMAL_CLASS && el.parentNode.className != PANEL_COLLAPSED_CLASS) 23. continue; 24. 25. // get the text value of the tag 26. var name = el.firstChild.nodeValue; 27. 28. // look for the name in loaded settings, apply the normal/collapsed class 29. el.parentNode.className = (panelsStatus[name] == "false") ? PANEL_COLLAPSED_CLASS : PANEL_NORMAL_CLASS; 30. 31. // add the click behavor to headings 32. el.onclick = function() 33. { 34. var target = this.parentNode; 35. var name = this.firstChild.nodeValue; ©2009 RichNetApps.com
  • 9. Javascript animated collapsible panels without any frameworks 9 36. var collapsed = target.className == PANEL_COLLAPSED_CLASS; 37. saveSettings(name, !collapsed.toString()); 38. animateTogglePanel(target, collapsed); 39. }; 40. } 41. } 42. 43. /** 44. * Start the expand/collapse animation of the panel 45. * @param panel reference to the panel div 46. */ 47. function animateTogglePanel(panel, expanding) 48. { 49. // find the .panelcontent div 50. var elements = panel.getElementsByTagName("div"); 51. var panelContent = null; 52. for (var i=0; i < elements.length; i++) 53. { 54. if (elements[i].className == PANEL_CONTENT_CLASS) 55. { 56. panelContent = elements[i]; 57. break; 58. } 59. } 60. 61. // make sure the content is visible before getting its height 62. panelContent.style.display = "block"; 63. 64. // get the height of the content 65. var contentHeight = panelContent.offsetHeight; 66. 67. // if panel is collapsed and expanding, we must start with 0 height 68. if (expanding) 69. panelContent.style.height = "0px"; 70. 71. var stepHeight = contentHeight / PANEL_ANIMATION_STEPS; 72. var direction = (!expanding ? -1 : 1); 73. 74. setTimeout(function(){animateStep(panelContent,1,stepHeight,direction)}, PANEL_ANIMATION_DELAY); 75. } 76. 77. /** 78. * Change the height of the target 79. * @param panelContent reference to the panel content to change height 80. * @param iteration current iteration; 81. * @param stepHeight height increment to be added/substracted in one step 82. * @param direction 1 for expanding, -1 for collapsing 83. */ 84. function animateStep(panelContent, iteration, stepHeight, direction) 85. { 86. if (iteration < PANEL_ANIMATION_STEPS) 87. { 88. panelContent.style.height = Math.round(((direction > 0) ? iteration : PANEL_ANIMATION_STEPS - iteration) * stepHeight) +"px"; 89. iteration++; 90. setTimeout(function() ©2009 RichNetApps.com
  • 10. Javascript animated collapsible panels without any frameworks 10 {animateStep(panelContent,iteration,stepHeight,direction)}, PANEL_ANIMATION_DELAY); 91. } 92. else 93. { 94. // set class for the panel 95. panelContent.parentNode.className = (direction < 0) ? PANEL_COLLAPSED_CLASS : PANEL_NORMAL_CLASS; 96. // clear inline styles 97. panelContent.style.display = panelContent.style.height = ""; 98. } 99. } 100. 101. // ------------------------------------------------------------------------------ 102. // Load-Save 103. // ------------------------------------------------------------------------------ 104. /** 105. * Reads the "panels" cookie if exists, expects data formatted as key:value| 106. * puts in panelsStatus object 107. */ 108. function loadSettings() 109. { 110. // prepare the object that will keep the panel statuses 111. panelsStatus = {}; 112. 113. // find the cookie name 114. var start = document.cookie.indexOf(PANEL_COOKIE_NAME + "="); 115. if (start == -1) return; 116. 117. // starting point of the value 118. start += PANEL_COOKIE_NAME.length+1; 119. 120. // find end point of the value 121. var end = document.cookie.indexOf(";", start); 122. if (end == -1) end = document.cookie.length-1; 123. 124. // get the value, split into key:value pairs 125. var cookieValue = unescape(document.cookie.substring(start, end)); 126. var panelsData = cookieValue.split("|"); 127. 128. // split each key:value pair and put in object 129. for (var i=0; i< panelsData.length; i++) 130. { 131. var pair = panelsData[i].split(":"); 132. panelsStatus[pair[0]] = pair[1]; 133. } 134. } 135. 136. /** 137. * Takes data from the panelsStatus object, formats as key:value|key:value... 138. * and puts in cookie valid for 365 days 139. * @param key key name to save 140. * @paeam value key value 141. */ 142. function saveSettings(key, value) 143. { 144. // put the new value in the object ©2009 RichNetApps.com
  • 11. Javascript animated collapsible panels without any frameworks 11 145. panelsStatus[key] = value; 146. 147. // create an array that will keep the key:value pairs 148. var panelsData = []; 149. for (var key in panelsStatus) 150. panelsData.push(key+":"+panelsStatus[key]); 151. 152. // set the cookie expiration date 1 year from now 153. var today = new Date(); 154. var expirationDate = new Date(today.getTime() + 365 * 1000 * 60 * 60 * 24); 155. // write the cookie 156. document.cookie = PANEL_COOKIE_NAME + "=" + escape(panelsData.join("|")) + ";expires=" + expirationDate.toGMTString(); 157. } 158. 159. // --------------------------------------------------------------------------- 160. // Register setUpPanels to be executed on load 161. if (window.addEventListener) 162. { 163. // the "proper" way 164. window.addEventListener("load", setUpPanels, false); 165. } 166. else 167. if (window.attachEvent) 168. { 169. // the IE way 170. window.attachEvent("onload", setUpPanels); 171. } As you can see, the code is fully commented, so any details I’ve left out you should under- stand easily. Download the code You can download a fully working example by going to the online article at http://www.richnetapps.com/?p=389. ©2009 RichNetApps.com