getting the collapser to work

[KaranSokhey]

Hi, I recently psoted a script request for a animatied collapser at http://www.yui-ext.com/forum/viewtopic.php?t=2045
and from there i was lead to this post http://www.yui-ext.com/forum/viewtopic.php?t=1232

I just need help getting it to work properly because right now non of it works for me. Just wondering what Im doing wrong.

1. Downloaded the YahooUserInterface and placed the required files: yahoo-debug.js, dom-debug.js, event-debug.js, animation-debug.js
2. Made my own yui-ext with these selections; Animator Core, YAHOO.ext.View and all the core YAHOO.ext
3. Also saved my own file called collapser.js with the following code:

collapser.js

// Collapser

var Collapser = function(collapsableContainer){

   containerEl = getEl(collapsableContainer);
   this.clickEl = getEl(YAHOO.util.Dom.getElementsByClassName('ycollapsable-menuhead', null, collapsableContainer)[0]);
   this.collapseEl = getEl(YAHOO.util.Dom.getElementsByClassName('ycollapsable-menucontent', null, collapsableContainer)[0]);
   this.clickEl.addClass('ycollapsable-expanded');
   
   this.id = containerEl.id;
   this.enabled = true;
   this.collapsed = false;
   
   this.clickEl.mon('click', function(){
      if (this.enabled) this.collapsed == true ?
         this.expand() : this.collapse();
   }, this, true);
   
   this.events = {
        'expanded' : new YAHOO.util.CustomEvent('expanded'),
        'collapsed' : new YAHOO.util.CustomEvent('collapsed'),
        'enabled' : new YAHOO.util.CustomEvent('enabled'),
        'disabled' : new YAHOO.util.CustomEvent('disabled')
    };
   
};

YAHOO.extendX(Collapser, YAHOO.ext.util.Observable, {

   collapse : function(animate){
      if (!this.collapsed) {
          this.collapseEl.clip();
          if (animate == null || animate == true) {
             this.collapseEl.setHeight(1, true, .15, this.afterCollapse.createDelegate(this), YAHOO.util.Easing.easeIn);
          } else {
             this.collapseEl.setHeight(1);
             this.afterCollapse();
          }
      }
   },
   
   afterCollapse : function(){
      this.collapsed = true;
      this.collapseEl.setDisplayed(false);
      this.clickEl.replaceClass('ycollapsable-expanded','ycollapsable-collapsed');
      this.fireEvent('collapsed', this);
   },
   
   expand : function(animate){
      if (this.collapsed) {
          this.collapseEl.setDisplayed(true);
          if (animate == null || animate == true) {
             this.collapseEl.autoHeight(animate, .25, this.afterExpand.createDelegate(this), YAHOO.util.Easing.easeOut);
          } else {
             this.collapseEl.autoHeight();
             this.afterExapand();
          }
      }
   },
   
   afterExpand : function(){
      this.collapsed = false;
      this.collapseEl.unclip();
      this.collapseEl.setStyle('height', '');   
      this.clickEl.replaceClass('ycollapsable-collapsed','ycollapsable-expanded');
      this.fireEvent('expanded', this);
   },
   
   enable : function(){
      this.enabled = true;
      this.clickEl.removeClass('ycollapsable-disabled');
      this.fireEvent('enabled', this);
   },
   
   disable : function(animate){
      this.enabled = false;
      this.collapse(animate);
      this.clickEl.addClass('ycollapsable-disabled');
      this.fireEvent('disabled', this);
   },
   
   restoreState : function(defaultState, provider){
      if(!provider){
         YAHOO.ext.state.Manager.setProvider(new YAHOO.ext.state.CookieProvider());
         provider = YAHOO.ext.state.Manager;
      }
      var sm = new CollapserStateManager();
      sm.init(this, provider, defaultState);
   }
});

var CollapserStateManager = function(collapserObject, provider){

  this.state = {
     collapsed: true,
     enabled: true
  };
   
};

CollapserStateManager.prototype = {
    init : function(collapser, provider, defaultState){
       
        this.provider = provider;
       
        if (!defaultState) {
              defaultState = { enabled: true, collapsed: false };
        }
        var savedState = provider.get(collapser.id+'-collapser-state');
        this.state = savedState || defaultState;
       
         if(this.state.collapsed){                           
            collapser.collapse(false);
         } else {
            collapser.expand(false);
         }

         if(this.state.enabled == true){
            collapser.enable();
         }else{
            collapser.disable();
         }
           
        this.collapser = collapser;
        collapser.on('collapsed', this.onCollapsed, this, true);
        collapser.on('expanded', this.onExpanded, this, true);
        collapser.on('enabled', this.onEnabled, this, true);
        collapser.on('disabled', this.onDisabled, this, true);
    },
   
    storeState : function(){                   
        this.provider.set(this.collapser.id+'-collapser-state', this.state);
    },
   
    onCollapsed : function(){
        this.state.collapsed = true;
        this.storeState();
    },
   
    onExpanded : function(){
        this.state.collapsed = false;
        this.storeState();
    },
   
     onEnabled : function(){
        this.state.enabled = true;
        this.storeState();
    },
   
     onDisabled : function(){
        this.state.enabled = false;
        this.storeState();
    }
};

HTML:

<html>
<head>
   <script type="text/javascript" src="js/yahoo-debug.js"></script>
   <script type="text/javascript" src="js/dom-debug.js"></script>
   <script type="text/javascript" src="js/event-debug.js"></script>
   <script type="text/javascript" src="js/animation-debug.js"></script>
   <script type="text/javascript" src="js/yui-ext.js"></script>
   <script type="text/javascript" src="js/collapser.js"></script>
   <style>
      .ycollapsable-menuhead {border:1px solid #555;background:#369;color:#fff;cursor:pointer;padding-left:10px;}
      .ycollapsable-menucontent {border:1px solid #555;padding:20px;}
      .ycollapsable-disabled {background:#999;color:#ddd;cursor:default;}
   </style>
</head>
<body>
    <div id="collapser1" class="ycollapsable">
        <div class="ycollapsable-menuhead">
            Header
        </div>
        <div class="ycollapsable-menucontent">
            <div>
                Content
Content
Content
Content
            </div>
        </div>
    </div>

    <div id="collapser2" class="ycollapsable">
        <div class="ycollapsable-menuhead">
            Header 2
        </div>
        <div class="ycollapsable-menucontent">
            <div>
                Content 2
Content 2
            </div>
        </div>
    </div>

   

<input id="toggleButton" type="button" value="Enable" /></p>

    <script>
        var coll1 = new Collapser('collapser1');
        var coll2 =  new Collapser('collapser2');

        coll1.restoreState({enabled: true, collapsed: true});
        coll2.restoreState({enabled: false});
        setButtonState();

        YAHOO.util.Event.on('toggleButton', 'click', toggleCollapser, coll2, true);

      function toggleCollapser(){
         if (coll2.enabled) {
            coll2.disable(false);
         }
         else {
            coll2.enable(false);
         }
         setButtonState();
      }

      function setButtonState() {
         YAHOO.util.Dom.get('toggleButton').value = (coll2.enabled ? "Disable" : "Enable");
      }
    </script>
</body>
</html>

[tryanDLS]

'Nothing works' doesn't tell us much. What error are you getting? Did you use a debugger to find out where the error is occurring?

If you are new to yui-ext, you should not be spending time creating your own version of the yui-ext.js, until you understand the dependencides - it's possible you're missing a required component.

[KaranSokhey]

Sorry, by saying nothing happens I mean that when I click on Hearder1 or Header2 or the Enable button there are no errors nothing. I think I might be doing something wrong. Im not too sure of how it works. If someone could show me how to set the yui from http://www.yui-ext.com/forum/viewtopic.php?t=1232 up properly that would be very much appreciated.

[brian.moeskau]

I copied your code verbatim and it works perfectly. Your build of yui-ext is bad -- start with the version of 'yui-ext.js' that comes with the released library, and as Tim said, only start trying to build your own when you're more comfortable with what all the dependencies are. You are undoubtedly getting an error somewhere, you just probably aren't seeing it (do you use Firebug?).