Comparison between Javascript objects

Question

Hi... I have made a simple accordion for my site using jQuery... It worked great, but I've recently started working on a change where if you click the currently opened segments title (the clickable area to slide up/down), it should close the current section.

var sideMenu = {
        activated: {},
        setup: function() {
        $('.menu-category-heading').bind('click', function() { 
                     sideMenu.slideMenu($('ul', $(this).parent()));
                     });

        }, 

        slideMenu: function(menuObj) {

         if (sideMenu.activated == menuObj) {

          $(sideMenu.activated).slideUp(400);
          sideMenu.activated = null;
          console.log('same');

         } else {

          $(sideMenu.activated).slideUp(400);
          menuObj.slideDown(500);
          sideMenu.activated = menuObj;
          console.log('new');
         }
        }


    }

For some reason the comparison is never working... it does if I add $(menuObj).attr('id') and the same for activated. But this is not ideal as not all items will have an id attribute.

Any suggestions as to make the object comparison work? Or any other tips?

Thank you!

Answer 1

You are probably saving a jQuery object (the result of a $ call) rather than the native element. Each time you do a $(myEl) a new object is created and the references will not match up, but the native element will. Try:

if (slideMenu.activated[0] == menuObj[0]) {
    ...
}