Posted By

fredaudet on 07/18/08


Tagged

div toggle content slider slide


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

dsquare
wizard04


Div Slider


 / Published in: JavaScript
 

  1. window.addEvent('domready', function() {
  2.  
  3. //inject div
  4. var el = new Element('div', {
  5. 'id': 'coupon',
  6. 'class': 'closed',
  7. 'text': ' '
  8. }).inject(document.body);
  9.  
  10. //settings
  11. var state = 'closed';
  12.  
  13. //add the click toggle
  14. el.addEvent('click', function() {
  15.  
  16. //change the state
  17. state = (state == 'closed' ? 'open' : 'closed');
  18. el.morph('.' + state);
  19.  
  20. });
  21.  
  22. });
  23.  
  24.  
  25. <style type="text/css">
  26. #coupon { top:0; right:100px; position:absolute; cursor:pointer; width:585px; background:url(http://davidwalsh.name/dw-content/slider-coupon.png) 0 bottom no-repeat; }
  27. .closed { height:29px; }
  28. .open { height:176px; }
  29. </style>

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: jackkeller on August 11, 2008

Is this based off of any particular framework (jQuery, Script.aculo.us, Mootools, Etcetera) or is it a simple standalone?

You need to login to post a comment.