toggle / showhide with YUI javascript library


/ Published in: JavaScript
Save to your folder(s)

For this snippet you need the files: yahoo-dom-event.js and animation-min.js from the Yahoo User Interface Library (version 2.4.1).

To use this snippet add a class "toggle" to a link which should toggle the effect. To this link add a rel attribute. This attribute contains: id of object to toggle, animation type, animation duration.

Toggle element #1

This will toggle the div with id "example1", the effect used will be "fade" and it will take "20" frames.


Copy this code and paste it in your HTML
  1. var Dom = YAHOO.util.Dom;
  2. var Event = YAHOO.util.Event;
  3. var $ = function(id) {
  4. return document.getElementById(id);
  5. }
  6. //++++++++++++++++++++++++++++++++++++
  7. // YUI TOGGLE
  8. // 1/22/2008 - Edwart Visser & AW
  9. //
  10. // toggle the visibility
  11. //
  12. // REQUIRES: yahoo-dom-event.js
  13. // OPTIONAL: animation-min.js
  14. //
  15. //++++++++++++++++++++++++++++++++++++
  16. YAHOO.namespace("lutsr");
  17.  
  18. YAHOO.lutsr.doToggle = {
  19. init : function() {
  20. this.toggleLinks = Dom.getElementsByClassName("toggle");
  21. for(var i=0; i<this.toggleLinks.length; i++) {
  22. Event.addListener(this.toggleLinks[i],"click",this.animateElements,this);
  23. }
  24. },
  25. toggleElements : function(e,controlNode,refEl) {
  26. if(controlNode && refEl) {
  27. if(Dom.hasClass(refEl,"show")) {
  28. Dom.removeClass(controlNode,"selected");
  29. Dom.removeClass(refEl,"show");
  30. } else {
  31. Dom.addClass(controlNode,"selected");
  32. Dom.addClass(refEl,"show");
  33. }
  34. }
  35. // to disable control node's default behaviour
  36. return false;
  37. },
  38. animateElements : function(e,obj) {
  39. // obj = javascript toggle object
  40. // this = link clicked
  41. Event.preventDefault(e);
  42.  
  43. if(this.rel) {
  44. controlNode = this;
  45. }
  46. if(typeof(controlNode) == "string") {
  47. controlNode = Dom.get(controlNode);
  48. }
  49.  
  50. // objParameters
  51. // [0] = object id
  52. // [1] = animation type (fade, slide)
  53. // [2] = animation duration (seconds)
  54. var linkClicked = this;
  55. var objParameters = controlNode.rel.split(",");
  56. var refEl = Dom.get(objParameters[0]);
  57. var objStatus = Dom.hasClass(refEl,"show"); // if true, object is shown
  58.  
  59. switchClasses = function() {
  60. obj.toggleOtherElements(e,linkClicked,refEl);
  61. obj.toggleElements(e,linkClicked,refEl);
  62. }
  63.  
  64. if(objParameters[1] == "fade") {
  65. if(objStatus == true) {
  66. var attributes = {
  67. opacity: { from: .999, to: 0 }
  68. }
  69. var objAnim = new YAHOO.util.Anim(objParameters[0],attributes);
  70. objAnim.useSeconds = false;
  71. objAnim.duration = objParameters[2];
  72. objAnim.onComplete.subscribe(switchClasses);
  73. objAnim.animate();
  74. } else {
  75. Dom.setStyle(objParameters[0],"opacity",0);
  76. switchClasses();
  77. var attributes = {
  78. opacity: { from: 0, to: .999 }
  79. }
  80. var objAnim = new YAHOO.util.Anim(objParameters[0],attributes);
  81. objAnim.useSeconds = false;
  82. objAnim.duration = objParameters[2];
  83. objAnim.animate();
  84. }
  85. } else if (objParameters[1] == "slide") {
  86. // not implemented yet
  87. } else {
  88. // NO ANIMATION - switch classes
  89. switchClasses();
  90. }
  91. },
  92. toggleOtherElements : function(e,linkClicked,refEl) {
  93. // toggle selected state of other elements pointing to the same source
  94. for(var i=0; i<this.toggleLinks.length; i++) {
  95. var objParameters = this.toggleLinks[i].rel.split(",");
  96. var linkClickedParameters = linkClicked.rel.split(",");
  97.  
  98. if(objParameters[0] == linkClickedParameters[0]) {
  99. if(Dom.hasClass(this.toggleLinks[i],"selected")) {
  100. Dom.removeClass(this.toggleLinks[i],"selected");
  101. } else {
  102. Dom.addClass(this.toggleLinks[i],"selected");
  103. }
  104. }
  105. }
  106. }
  107. }
  108.  
  109. initPage = function() {
  110. YAHOO.lutsr.doToggle.init();
  111. }
  112.  
  113. Event.addListener(window,"load",initPage);

URL: http://www.lutsr.nl/yui/toggle/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.