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 h

Answer 1

You can toggle the 'closed' class on the first ul tag within the gui domElement.

Here's how to do it if you are using JQuery:

var gui = new dat.GUI();
$(gui.domElement).find(">ul").toggleClass("closed");

Answer 2

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).

Answer 3

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 4

You can try

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

Answer 5

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 6

As of latest version:

gui.close();