title: Collapsing svg group with Raphael.js
body: <p>I'm working with svg through Raphael.js and I need to collapse SVG group and show it on click.</p>
  
  <p>I've tried to use 'visibility' attriburte of SVG group and change it on click, but it is ok with hiding but it's not appear back;</p>
  
  <pre class="lang-js prettyprint-override"><code> const GroupCollapse = function(paper) {
              const $svg = paper.canvas; // #mysvg is SVG doc
              const g = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
              $svg.appendChild(g);
  
              this.paper = paper;
              this.node = g;
              this.attrs = {};
              this._ = {};
              this.add = function (el) {
                  g.appendChild(el.node);
              };
          };
          GroupCollapse.prototype = Raphael.el;
  
          Raphael.fn.groupCollapse = function(... args) {
              return new GroupCollapse(this, ... args)
          };
  </code></pre>
  
  <p>This is my realisation of custom group.
  Then I create it like this:</p>
  
  <pre><code>let gc = paper.groupCollapse();
  </code></pre>
  
  <p>I make it 'hidden' And I have a function to make it visible that didn't work.</p>
  
  <pre><code>function showCollapsed() {
              gc.visibility = "visible";
  }
  </code></pre>
  
  <p>I want to have SVG group of Raphael circles that collapsing to one circle and unfolds on click to this circle. Could you help me and show the best way to do that. Thank you!</p>