Toggling

One trigger on one target

#trigger_foo
new Toggling({
    trigger: '#trigger_foo',
    target: '#target_foo',
    handler: function(tar, tri) {
      this.toggle(tar);
    }
  });
  

Multiple triggers on one target

.open
.close
.toggle
// Open the target
  new Toggling({
    trigger: '.open',
    target: '#target_bar',
    handler: function(tar) {
      this.show(tar);
    }
  });

  // Close the target
  new Toggling({
    trigger: '.close',
    target: '#target_bar',
    handler: function(tar) {
      this.hide(tar);
    }
  });

  // Toggle the target
  new Toggling({
    trigger: '.toggle',
    target: '#target_bar',
    handler: function(tar) {
      this.toggle(tar);
    }
  });
  

Self-trigger, passing 'self' as the target value

#trigger_self
new Toggling({
    trigger: '#trigger_self',
    target: 'self',
    handler: function() {
      this.toggleClass(this.target, 'active');
    }
  });
  

Target could also be declared in template using custom attribute: data-toggling="target-selector"

#trigger_foz
new Toggling({
    trigger: '#trigger_foz',
    handler: function(tar, tri) {
      this.toggle(tar);
    }
  });
  

Toggling first looks for adjacent or descendant target element according to trigger element. So that you can use it for multiple trigger-target pairs with same selectors.

.trigger
.target
.trigger
.target
new Toggling({
    trigger: '.trigger',
    target: '.target',
    handler: function(tar, tri) {
      this.toggleClass(tri, 'active');
      this.toggle(tar);
    }
  });
  

Pass 'html' as trigger, so that you can now trigger the event ( Close popup ) by clicking anywhere on screen

#trigger_baz
// Open the target
  new Toggling({
    trigger: '#trigger_baz',
    target: '#target_baz',
    handler: function(tar, tri) {
      this.toggle(tar);
    }
  });

  // Close the target by clicking on html
  new Toggling({
    trigger: 'html',
    excluded: '#trigger_baz',
    target: '#target_baz',
    handler: function(tar, tri) {
      this.hide(tar);
    }
  });
  

A common full screen popup demo

Motivation