Leaflet Sidebar - GeoJSON toggle

HTML

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Custom Leaflet GUI</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css">
<link rel="stylesheet" href="leaflet-sidebar.min.css">
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div id="sidebar" class="leaflet-sidebar collapsed">
  <!-- Nav tabs -->
  <div class="leaflet-sidebar-tabs">
        <ul role="tablist"> <!-- top aligned tabs -->
   	  <li><a href="#home" role="tab"><i class="fa fa-bars"></i></a></li>
	  <li><a href="#profile" role="tab"><i class="fa fa-info-circle"></i></a></li>
        </ul>

	<!-- bottom aligned tabs -->
	<ul role="tablist">
		<li><a href="https://github.com/" target="_blank"><i class="fab fa-github"></i></a></li>
	</ul>
    </div>

  <!-- Tab panes -->
  <div class="leaflet-sidebar-content">
    <div class="leaflet-sidebar-pane" id="home">
      <h1 class="leaflet-sidebar-header">
        Layers
        <span class="leaflet-sidebar-close"><i class="fa fa-caret-left"></i></span>
      </h1>
      <span id="layercontrol"></span>

    </div>
	

    <div class="leaflet-sidebar-pane" id="profile">
      <h1 class="leaflet-sidebar-header">About<span class="leaflet-sidebar-close"><i class="fa fa-caret-left"></i></span></h1>
	  <br>
	<p>This web map is an exercise in leaflet and javascript using taxi related GeoJSONs available on <a href='https://opendata.cityofnewyork.us/'> NYC Open Data </a>. It's goal is to identify ways in...

CSS

body {
  padding: 0;
  margin: 0;
}

html,
body,
#map {
  height: 100%;
  font-family: "Roboto", sans-serif;
}

/* Leaflet Layers Control */

.leaflet-control-layers {
  border-radius: none;
  box-shadow: none;
}

.leaflet-control-layers-expanded {
  width: 100% !important;
  padding: 0px;
  background-color: transparent;
  border: none !important;
}

#layercontrol {
  display: inline-block;
  width: 100%;
  padding: 10px;
  background-color: transparent;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

#layercontrol .title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 5px;
}

/* Leaflet Draw */

.leaflet-draw {
  display: none;
}

.leaflet-draw-toolbar {
  display: none;
}




.popup {
  position: relative;
  background-color: #fff;
  padding: 0px;
  width: auto;
  max-width: 500px;
  margin: 20px auto;
}

.legend {
    text-align: left;
    line-height: 18px;
    color: #555;
}
.legend i {
    width: 18px;
    height: 18px;
    float: left;
    margin-right: 8px;
    opacity: 0.7;
}

JavaScript

var map = L.map('map', {
	zoomControl: false, 
	attributionControl: false,   
	maxBounds: [
	//south west
	[40.203852, -74.774383],
	//north east
	[41.088102, -73.178917]
	],})
	.setView([40.697002, -74.024081], 11);

// Add base layer
L.tileLayer('http://services.arcgisonline.com/arcgis/rest/services/Canvas/World_Dark_Gray_Base/MapServer/tile/{z}/{y}/{x}', {      minZoom: 11,
      maxZoom: 16,
}).addTo(map);




// Fetch collisions data from our Glitch project
var nyc_tz = fetch('https://data.cityofnewyork.us/resource/755u-8jsi.geojson')
  .then(function (response) {
    // Read data as JSON
    return response.json();
  });
  

// Fetch lanes data from our Glitch project
var tlc_awpatp = fetch('https://data.cityofnewyork.us/resource/ek5y-zcyf.geojson')
  .then(function (response) {
    // Read data as JSON
    return response.json();
  });
  
  
// Fetch lanes data from our Glitch project
var vzv_tcst = fetch('https://data.cityofnewyork.us/resource/uu93-7t5b.geojson')
  .then(function (response) {
    // Read data as JSON
    return response.json();
  });
  

// Fetch lanes data from our Glitch project
var tlc_alcpsdtl = fetch('https://data.cityofnewyork.us/resource/hiik-hmf3.geojson')
  .then(function (response) {
    // Read data as JSON
    return response.json();
  });



// Fetch lanes data from our Glitch project
var tlc_de24hcp = fetch('https://data.cityofnewyork.us/resource/mzrr-g56e.geojson')
  .then(function (response) {
    // Read data as JSON
    return response.json();
  });


// Fetch lanes data from our Glitch project
var taxicab_pmai = fetch('https://data.cityofnewyork.us/resource/iz3u-6yhq.geojson')
  .then(function (response) {
    // Read data as JSON
    return response.json();
  });





// Fetch lanes data from our Glitch project
var tlc_detcl = fetch('https://data.cityofnewyork.us/resource/jz44-s3dt.geojson')
  .then(function (response) {
    // Read data as JSON
    return response.json();
  });







// Once both have loaded, do some...