Question

Can anyone tell me why this might not work

Drupal.behaviors.toggleGroups = {
  attach:function(context, settings) {
    for (var i = 1; i < 8; i++) {
      $('#edit-group-' + i.toString() + '-toggle').unbind('click').click(function(i) {
        $('#category-' + i.toString()).slideToggle();
      });
    }
  }
};

But this ugly thing works just fine

Drupal.behaviors.toggleGroups = {
  attach:function(context, settings) {
    $('#edit-group-1-toggle').unbind('click').click(function() {
      $('#category-1').slideToggle();
    });
    $('#edit-group-2-toggle').unbind('click').click(function() {
      $('#category-2').slideToggle();
    });
    $('#edit-group-3-toggle').unbind('click').click(function() {
      $('#category-3').slideToggle();
    });
    $('#edit-group-4-toggle').unbind('click').click(function() {
      $('#category-4').slideToggle();
    });
    $('#edit-group-5-toggle').unbind('click').click(function() {
      $('#category-5').slideToggle();
    });
    $('#edit-group-6-toggle').unbind('click').click(function() {
      $('#category-6').slideToggle();
    });
    $('#edit-group-7-toggle').unbind('click').click(function() {
      $('#category-7').slideToggle();
    });
  }
};

Ideally I’d like to do something like “while selector returns result do something” – the problem is that I need the incremented number, and each click will toggle a separate div. It possible I’m just thinking about it all wrong, but regardless, I can’t figure out why what I have isn’t valid…

And while your at it, any advise on the jQuery once() method so I don’t have to unbind/bind the click handler would also be appreciated…

THANK YOU!

Answer 1

This is a common case of “iditis”. If you use two common classes everything will be much easier to manipulate. Remove ids and add classes, edit-group-toggle and category, then you can grab their corresponding targets by index:

attach: function( context, settings ) {
  $('.edit-group-toggle').click(function() {
    $('.category').eq( $(this).index() ).slideToggle();
  });
}