Edit in JSFiddle

mapboxgl.accessToken = 'pk.eyJ1IjoiamVhbmNvY2hyYW5lIiwiYSI6ImNpaDJndHlsMzB4cXN2a201bXdzZWxqZ2wifQ.toP9rJQ4ap-Z2chY_a87Vw';

// enables proper text transformation for community area names
String.prototype.capitalize = function(){
    return this.toLowerCase().replace( /\b\w/g, function (m) {
        return m.toUpperCase();
    });
};

// initialize map inside the 'map' div
var map = new mapboxgl.Map({
	container: 'map',
  style: 'mapbox://styles/jeancochrane/ciodksoq10005a5necw9ccvop',
  zoom: 9,
  center: [-87.617728, 41.834620]
});

// global variables for hidden choropleth layers
var choropleth_layers = ["1-100", "100-500", "500-1000", "1000-1500", "1500-3000", "3000+"];

// wait until the map is loaded
map.on('load', function() {
		map.getCanvas().style.cursor = "default";
    
    map.addControl(new mapboxgl.Navigation({position: 'top-left'}));

    map.addSource('divvy', {
    	type: "vector",
      url: "mapbox://jeancochrane.04v9nybc"
    });
    
    map.addSource('neighborhoods', {
    	type: "vector",
      url: "mapbox://jeancochrane.81pz71fw"
    });
    
    // Adds neighborhood outlines
    map.addLayer({
    	"id": "neighborhood_boundaries",
      "type": "fill",
      "source": "neighborhoods",
      "source-layer": "community_area_stats",
      "paint": {
       	"fill-color": "#bfbfbf",
        "fill-outline-color": "#6E6E6E"
      },
    }, "3000+");
    
    // Hidden layer for thickening neighborhood outlines on hover
    map.addLayer({
    	"id": "neighborhood_hover",
      "type": "line",
      "source": "neighborhoods",
      "source-layer": "community_area_stats",
      "paint": {
      	"line-color": "#6E6E6E",
        "line-width": 4
      },
      "filter": ["==", "community", ""]
    });
    
    //Adds layer for Q2 station data
    map.addLayer({
    	"id": "divvy_data_q2",
      "type": "circle",
      "source": "divvy",
      "source-layer": "Divvy_stats1",
      "filter": ["!=", "Address", "State St & Randolph St"],
      "layout" : {
      	"visibility": "visible"
      },
      "paint": {
      	"circle-color": {
        	property: "Rides (2015 Q2)",
          stops: [
            [1, "#ffffcc"],
            [500, "#ff9933"],
            [1000, "#ff6600"],
            [5000, "red"],
            [10000, "maroon"]
          ]
        },
        "circle-opacity": 0.7,
        "circle-radius": {
          stops: [
          	[9, 2.5],
            [11, 5],
            [13, 8]
          ]
        },
      }
    });
    
    //Adds layer for Q4 station data
    map.addLayer({
    	"id": "divvy_data_q4",
      "type": "circle",
      "source": "divvy",
      "source-layer": "Divvy_stats1",
      "filter": ["!=", "Address", "State St & Randolph St"],
      "layout" : {
      	"visibility": "none"
      },
      "paint": {
      	"circle-color": {
        	property: "Rides (2015 Q4)",
          stops: [
            [1, "#ffffcc"],
            [500, "#ff9933"],
            [1000, "#ff6600"],
            [5000, "red"],
            [10000, "maroon"]
          ]
        },
        "circle-opacity": 0.7,
        "circle-radius": {
          stops: [
          	[9, 2.5],
            [11, 5],
            [13, 8]
          ]
        },
      }
    });
    
    // Hidden layer for thickening stations on hover
    map.addLayer({
    	"id": "station_hover",
      "type": "circle",
      "source": "divvy",
      "source-layer": "Divvy_stats1",
      "filter": [
      	"all",
        ["==", "Divvy Station", ""],
      	["!=", "Address", "State St & Randolph St"]
      ],
      "paint": {
      	"circle-color": "black",
        "circle-opacity": 0.6,
        "circle-radius": {
          stops: [
          	[9, 4.5],
            [11, 7],
            [13, 10]
          ]
        },
      }
    });

// click to show data
map.on('click', function (e) {
    var features_q2 = map.queryRenderedFeatures(e.point, {layer: "divvy_data_q2"});
    var visibility_q2 = map.getLayoutProperty('divvy_data_q2', 'visibility');
    
    var features_q4 = map.queryRenderedFeatures(e.point, {layer: "divvy_data_q4"});
    var visibility_q4 = map.getLayoutProperty('divvy_data_q4', 'visibility');
    
    var visibility_choropleth = map.getLayoutProperty('100-500', 'visibility');
    var features_choropleth = map.queryRenderedFeatures(e.point, {layers: choropleth_layers});
    
    var comm_area = map.queryRenderedFeatures(e.point, {layer: "neighborhood_boundaries"});
    
   	if (visibility_q2 === 'visible' && features_q2[0].properties["Rides (2015 Q2)"]) {
    
      var popup = new mapboxgl.Popup()
      	.setLngLat(features_q2[0].geometry.coordinates)
      	.setHTML("<h2><strong>" + comm_area[0].properties["Community District"] + "</strong>" + " (#" + comm_area[0].properties["Divvy Station"] + ")</h2><p><strong>" + features_q2[0].properties["Rides (2015 Q2)"] + "</strong> rides in Spring 2015.</p>")
      	.addTo(map);
      
    } else if (visibility_q4 === 'visible' && features_q4[0].properties["Rides (2015 Q4)"]) {

      var popup = new mapboxgl.Popup()
      	.setLngLat(features_q4[0].geometry.coordinates)
      	.setHTML("<h2><strong>" + comm_area[0].properties["Community District"] + "</strong>" + " (#" + comm_area[0].properties["Divvy Station"] + ")</h2><p><strong>" + features_q4[0].properties["Rides (2015 Q4)"] + "</strong> rides in Autumn 2015.</p>")
      	.addTo(map);
      
    } else if (visibility_choropleth === 'visible' && features_choropleth[0]) {
  
      var popup_choropleth = new mapboxgl.Popup()
      	.setLngLat(features_choropleth[0].geometry.coordinates[0][0])
      	.setHTML("<h2><strong>" +  features_choropleth[0].properties["community"].capitalize() + "</h2><p><strong>" + features_choropleth[0].properties["2015 Q4 (per station)"] + "</strong> rides per Divvy station <br> in Autumn 2015.</p>")
      	.addTo(map);
    
    } else {
    
    	document.getElementById('nhood').innerHTML = "";
    	document.getElementById('divvy_stats').innerHTML = "<p><em>Click on a station or neighborhood <br> for more information.</em></p>" 
      
    }
}); 

// hover styles for data
map.on("mousemove", function(e) {
		var features_nhood_hover = map.queryRenderedFeatures(e.point, {layer: "neighborhood_hover"});
    var visibility_choropleth = map.getLayoutProperty('100-500', 'visibility');
    
     var features_station_hover = map.queryRenderedFeatures(e.point, {layer: "station_hover"});
    var visibility_q2 = map.getLayoutProperty('divvy_data_q2', 'visibility');
    var visibility_q4 = map.getLayoutProperty('divvy_data_q4', 'visibility');
    
		if ((visibility_choropleth === 'visible') && (visibility_q2 = 'none') && (visibility_q4 = 'none') && features_nhood_hover[0].properties["community"]) {
    
    		map.setFilter("neighborhood_hover", ["==", "community", features_nhood_hover[0].properties["community"]]);
        map.getCanvas().style.cursor = "pointer";
        
    } else if (features_station_hover[0].properties["Divvy Station"] && ((visibility_q2 === 'visible') || (visibility_q4 === 'visible')) && (visibility_choropleth === "none")) {
    
    		map.setFilter("station_hover", ["==", "Divvy Station", features_station_hover[0].properties["Divvy Station"]]);
        map.getCanvas().style.cursor = "pointer";
        
    } else {
    
    		map.setFilter("neighborhood_hover", ["==", "community", ""]);
        map.setFilter("station_hover", ["==", "Divvy Station", ""]);
        map.getCanvas().style.cursor = "default";
        
    };
});
});

switchToQ2();
switchToQ4();
switchToChoropleth();

function switchToQ2() {
		var link = document.getElementById('q2');

    link.onclick = function (e) {
        e.preventDefault();
        e.stopPropagation();   
        document.getElementById('q4').className = 'inactive';
        document.getElementById('choropleth').className = 'inactive';
        
        map.setLayoutProperty('divvy_data_q2', 'visibility', 'visible');
        map.setLayoutProperty('divvy_data_q4', 'visibility', 'none');
        choropleth_layers.forEach(function(layer) {
        		map.setLayoutProperty(layer, 'visibility', 'none');
        });
        this.className = 'active';
    };
};

function switchToQ4() {
		var link = document.getElementById('q4');

    link.onclick = function (e) {
        e.preventDefault();
        e.stopPropagation();   
        document.getElementById('q2').className = 'inactive';
        document.getElementById('choropleth').className = 'inactive';
        
        map.setLayoutProperty('divvy_data_q4', 'visibility', 'visible');
        map.setLayoutProperty('divvy_data_q2', 'visibility', 'none');
        choropleth_layers.forEach(function(layer) {
        		map.setLayoutProperty(layer, 'visibility', 'none');
        });
        this.className = 'active';
    };
};

function switchToChoropleth() {
		var link = document.getElementById('choropleth');
    
    link.onclick = function (e) {
        e.preventDefault();
        e.stopPropagation();
        
        document.getElementById('q2').className = 'inactive';
        document.getElementById('q4').className = 'inactive';
        
        map.setLayoutProperty('divvy_data_q2', 'visibility', 'none');
        map.setLayoutProperty('divvy_data_q4', 'visibility', 'none');
        this.className = 'active';
        
        choropleth_layers.forEach(function(layer) {
        		map.setLayoutProperty(layer, 'visibility', 'visible');
        });
    };
}
body {
  margin: 0;
  padding: 0;
}

h2 {
  font-size: 1.1em;
  margin: 10px;
  color: #1a1a1a;
  line-height: 140%;
}

h3 {
  font-size: .9em;
  margin: 10px;
  color: #1a1a1a;
}

p {
  font-size: 0.8em;
  margin: 10px;
  text-align: left;
  color: #1a1a1a;
}

#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}

.map-overlay {
  position: absolute;
  bottom: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.9);
  margin-right: 20px;
  font-family: Arial, sans-serif;
  border-radius: 3px;
  overflow: clipped;
}

#q_button {
  bottom: 0;
  line-height: 18px;
  position: absolute;
  right: 0;
  background: rgba(255, 255, 255, 0.9);
  margin-right: 20px;
  margin-bottom: 50px;
  font-family: Arial, sans-serif;
  border-radius: 3px;
  overflow: clipped;
  box-shadow: 0 5px 10px rgba(0,0,0,0.20);
}

#q_button a {
  font-size: .8em;
  text-decoration: none;
  color: #1a1a1a;
  display: block;
  margin: 0;
  padding: 10px;
  text-align: center;
  border-bottom: 1px solid #dedede;
}

#q_button a:hover {
  background: #f2f2f2;
  border-radius: 3px;
}

#q_button a.active {
  background: #e6e6e6;
  border-radius: 3px;
}

#q_button a.inactive {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 3px;
}

#q_button a:last-child {
  border-bottom: none;
}

#title {
  top: 0;
  margin-top: 20px;
  height: 115px;
  padding: 10px;
  line-height: 18px;
  box-shadow: 0 5px 10px rgba(0,0,0,0.20);
}

.mapboxgl-popup {
  max-width: 300px;
  font: Arial, sans-serif;
  color: #1a1a1a;
  z-index: 1;
}
<div id="map"></div>

<div id="q_button">
  <a href='#' id='q2' class="active"><strong>Stations</strong> (Spring 2015)</a>
  <a href='#' id='q4'><strong>Stations</strong> (Autumn 2015)</a>
  <a href="#" id="choropleth"><strong>Neighborhoods</strong> (adjusted <br> for number of stations)</a>
</div>

<div class="map-overlay" id="title">
  <h2>Which Divvy stations <br>get the most use?</h2>
  <div id="nhood"></div>
  <div id="divvy_stats">
    <p><em>Click on a station or neighborhood <br> for more information.</em></p>
  </div>
</div>