<div id="viewDiv"></div>

html,
body,
#viewDiv {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}

.esri-ui .esri-attribution {
  left: auto;
}

require([
  "esri/views/SceneView",
  "esri/views/MapView",
  "esri/widgets/Expand",
  "esri/widgets/BasemapGallery"
],
function(SceneView, MapView, Expand, BasemapGallery) {
  
  var viewOptions = {
    container: "viewDiv",
    map: {
      basemap: "streets-vector"
    },
    center: [-98.35, 39.5],
    zoom: 2
  };

  // 2D:
  var view = new MapView(viewOptions);

  // 3D:
  // var view = new SceneView(viewOptions);
  
  var basemapGallery = new BasemapGallery({
    view: view
  });
  
  var expand = new Expand({
    view: view,
    content: basemapGallery,
    expandTooltip: 'Change Basemap'
  });
  view.ui.add(expand, "top-right");
  
  // Using the "watch" concept
  // https://developers.arcgis.com/javascript/latest/guide/index.html#watching-property-changes
  // to watch the "activeBasemap" property of the BasemapGallery
  // When it changes, close the Expand widget.
  basemapGallery.watch('activeBasemap', function() {
    console.log('changed!');
    expand.expanded = !expand.expanded;
  })
});