dat.gui how to hide menu with code

Question

I made a menu using dat.gui for my applcation with Three.js. It works fine, I have also discovered that pressing h key I can hide the menu created with dat.gui. My question is how can I make the menu appear/disappear directly from the code?

 var gui = new dat.GUI();
 gui.add(text, 'message');
 gui.add(text, 'speed', -5, 5);

 gui.???

I tried to use the property of the DOMElement hide and it works but I would like a unique way to handle this function. There is a function to call? I have noticed that JavaScript events related to the keystrokes are related to the scope via a bind in the library. But what is the correct way to do this?

Answer 1

I hade the same issue and solved it by:

var gui = new dat.GUI();
dat.GUI.toggleHide();

Answer 2

Ok found a solution by adding the following function to the prototype of dat.GUI:

  dat.GUI.prototype.removeFolder = function(name) {
    var folder = this.__folders[name];
    if (!folder) {
      return;
    }
    folder.close();
    this.__ul.removeChild(folder.domElement.parentNode);
    delete this.__folders[name];
    this.onResize();
  }

Answer 3

You can try

var gui = new dat.GUI();
 //... your logic here
gui.__proto__.constructor.toggleHide()

Answer 4

As of latest version:

gui.close();

Answer 5

I'd recommend:

$(gui.domElement).attr("hidden", true);

as it also prevents clicking. With toggleHide() it's possible to still click it. Just closing it leaves the opportunity to re-open.

Worked for me as I don't want the user to re-open it ;)

Answer 6

What you and I were looking for is

var gui = new dat.GUI();
// to toggle it closed
gui.closed = true;
// to toggle it open again
gui.closed = false;

I got this from the source at line 2104 where the internal functions open and close are doing exactly this.

The gui reacts to the value change on the fly (you can reassign gui.closed from the console to see it in action).