document.getElements('.toggler').addEvent('click', function(e){

var target  = this.getChildren('i');
console.log(target);

if (target.hasClass('icon-minus')) {
   console.log('hasclass - minus');
   target.addClass('icon-plus').removeClass('icon-minus');
   this.getNext('div').hide();
} else {
   console.log('hasclass - plus');
   target.addClass('icon-minus').removeClass('icon-plus');
   this.getNext('div').show();
}
});

<div class="filter">
   <sup class="toggler">
      <i class="icon-minus"></i>
   </sup>
</div>

1: Object[i.icon-minus]
hasclass - minus
2: Object[i.icon-plus]
hasclass - minus
3: Object[i.icon-plus]
hasclass - minus

document.getElements('.toggler').addEvent('click', function(e){
    e && e.stop();
    // the i and the div won't change. only get them from DOM once.
    var i = this.retrieve('i', this.getElement('i')),
        next = this.retrieve('next', this.getNext('div')),
        // keep state in storage also, no need to query dom all the time.
        isCollapsed = this.retrieve('state', i.hasClass('icon-plus'));

    // based upon current state (which we don't need in DOM after the first time)
    // calls either hide or show dynamically.
    next[['hide', 'show'][+isCollapsed]]();
    // all we want is to swap the classes, use toggleClass.
    i.toggleClass('icon-plus').toggleClass('icon-minus');
    // save new state
    this.store('state', !isCollapsed);
});

[i.icon-minus, $family: function, $constructor: function,// etc

[false, $family: function, $constructor: function, each: function, // etc

var target  = this.getFirst('i');
//or
var target  = this.getElement('i');

target.each(function(thisElement){

    if (thisElement.hasClass('icon-minus')) {
        thisElement.addClass('icon-plus').removeClass('icon-minus');
        this.getNext('div').hide();
    } else {
        thisElement.addClass('icon-minus').removeClass('icon-plus');
        this.getNext('div').show();
    }
}