Toggle custom element.

<!DOCTYPE html>
<html>
<head>
  <script data-require="webcomponentsjs@*" data-semver="0.7.2" src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.2/webcomponents.js"></script>
  <script src="util.js"></script>
  <link rel="import" href="toggle.html">
</head>
<body>
  <toggle-next></toggle-next>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dignissim, nisi non rhoncus condimentum, felis ante porta eros, ut tincidunt odio nisl a libero. Integer scelerisque, augue ut accumsan gravida, dui dui sollicitudin libero, in interdum
    mauris erat sit amet urna.
  </p>
</body>
</html>

Context = function() {
  this.doc = (document.currentScript || document._currentScript).ownerDocument;
};

Context.prototype.import = function(id) {
  return document.importNode(this.doc.querySelector('#'+id).content, true);
};

function NewElement(name, proto) {
  var ep = Object.create(HTMLElement.prototype);
  Object.keys(proto).forEach(function(key) {
    ep[key] = proto[key];
  });
  document.registerElement(name, {prototype: ep});
}

<template id=t>
  <button>Hide</button>
</template>

<script>
  (function() {
    var ctx = new Context();

    NewElement('toggle-next', {
      createdCallback: function() {
        this.appendChild(ctx.import('t'));
        this.button = this.querySelector('button');
        this.button.addEventListener('click',
          this._buttonClick.bind(this));
      },

      _buttonClick: function() {
        var current = this.nextElementSibling.style.visibility;
        if (current == 'collapse') {
          this.nextElementSibling.style.visibility = 'visible';
          this.button.innerText = 'Hide';
        } else {
          this.nextElementSibling.style.visibility = 'collapse';
          this.button.innerText = 'Show';
        }
      }
    })
  })();
</script>