Mapbox JS Tabbing

by dollysingh3192

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <!-- This page is copyright Elated Communications Ltd. (www.elated.com) -->

    <title>JavaScript tabs example</title>

    <style type="text/css">
        body {
            font-size: 80%;
            font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
        }

        body {
            margin: 0;
            padding: 0;
        }

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

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

        ul#tabs {
            position: relative;
            list-style-type: none;
            margin: 30px 0 0 0;
            padding: 0 0 0.3em 0;
        }

        ul#tabs li {
            display: inline;
        }

        ul#tabs li a {
            color: #42454a;
            background-color: #dedbde;
            border: 1px solid #c9c3ba;
            border-bottom: none;
            padding: 0.3em;
            text-decoration: none;
        }

        ul#tabs li a:hover {
            background-color: #f1f0ee;
        }

        ul#tabs li a.selected {
            color: #000;
            background-color: #f1f0ee;
            font-weight: bold;
            padding: 0.7em 0.3em 0.38em 0.3em;
        }

        div.tabContent {
            height: 500px;
            position: relative;
            border: 1px solid #c9c3ba;
            padding: 0.5em;
            background-color: #f1f0ee;
        }

        div.tabContent.hide {
            display: none;
        }
    </style>

    <link href="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" />
    <script src="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>

    <script...