Mobile Map Pane: Mobile High School (Example)

<div class="mobilemappane mobilemappane-highschool ">

    <div class="brandvoice brandvoice-sidebar">
        <h3>Hospitality, Tourism, and Recreation</h3>
    </div>

    <div class="mobilemappane-x-select">
        <button class="buttonselect" type="button">
            <span class="buttonselect-x-top">
                <span class="buttonselect-x-title">Culinary Arts</span>
                <span class="buttonselect-x-pointer">
                    <svg>
                        <use xlink:href="#icon-pointerdown"></use>
                    </svg>
                </span>
            </span>
            <span class="buttonselect-x-subtitle">Provide intellectual, psychosocial, and physical care and development of children.</span>
        </button>
    </div>

    <h4 class="mobilemappane-x-heading"><strong>9 Colleges</strong> have this degree programs</h4>

    <div class="mobilemappane-x-cards">
        <div class="l-cards">
            <a class="card card-highschool" href="#" target="_blank">
                <div class="card-x-map" id="card-x-map1"></div>
                <div class="card-x-body">
                    <div class="card-x-title">Anaheim Union High School District</div>
                    <div class="card-x-subtitle">2 High Schools</div>
                </div>
            </a>
            <a class="card card-highschool" href="#" target="_blank">
                <div class="card-x-map" id="card-x-map2"></div>
                <div class="card-x-body">
                    <div class="card-x-title">Capistrano USD and Laguna Beach USD</div>
                    <div class="card-x-subtitle">10 High Schools</div>
                </div>
            </a>
            <a class="card card-highschool" href="#" target="_blank">
                <div class="card-x-map" id="card-x-map3"></div>
                <div class="card-x-body">
                    <div class="card-x-title">Brea Olinda Unified School District</div>
                    <div class="card-x-subtitle">1 High Schools</div>
                </div>
            </a>
            <a class="card card-highschool" href="#" target="_blank">
                <div class="card-x-map" id="card-x-map4"></div>
                <div class="card-x-body">
                    <div class="card-x-title">Brea Olinda Unified School District</div>
                    <div class="card-x-subtitle">10 High Schools</div>
                </div>
            </a>
            <a class="card card-highschool" href="#" target="_blank">
                <div class="card-x-map" id="card-x-map5"></div>
                <div class="card-x-body">
                    <div class="card-x-title">Brea Olinda Unified School District</div>
                    <div class="card-x-subtitle">10 High Schools</div>
                </div>
            </a>
            <a class="card card-highschool" href="#" target="_blank">
                <div class="card-x-map" id="card-x-map6"></div>
                <div class="card-x-body">
                    <div class="card-x-title">Brea Olinda Unified School District</div>
                    <div class="card-x-subtitle">10 High Schools</div>
                </div>
            </a>
            <a class="card card-highschool" href="#" target="_blank">
                <div class="card-x-map" id="card-x-map7"></div>
                <div class="card-x-body">
                    <div class="card-x-title">Brea Olinda Unified School District</div>
                    <div class="card-x-subtitle">10 High Schools</div>
                </div>
            </a>
        </div>
    </div>

</div>

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin="" />

<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js" integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg==" crossorigin=""></script>

<script>
    var cardmap1 = L.map('card-x-map1', {
        zoomControl: false,
        attributionControl: false
    }).setView([33.6412, -117.9188], 10);
    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        maxZoom: 18,
        id: 'mapbox.streets',
        accessToken: 'pk.eyJ1IjoiZGVyd2luMSIsImEiOiJjanVlZTF0encwMmthNDVwZ3JkcG1zM3dwIn0.QUhvREtLO2bgPkj3CyG3vw'
    }).addTo(cardmap1);
    // Create the map marker.
    var icon = L.divIcon({
        className: 'mapmarker',
        iconSize: null,
        iconAnchor: [11, 11],
    });
    var marker1 = L.marker([33.6412, -117.9188], {
        icon: icon
    }).addTo(cardmap1);
    var cardmap2 = L.map('card-x-map2', {
        zoomControl: false,
        attributionControl: false
    }).setView([33.6412, -117.9188], 10);
    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        maxZoom: 18,
        id: 'mapbox.streets',
        accessToken: 'pk.eyJ1IjoiZGVyd2luMSIsImEiOiJjanVlZTF0encwMmthNDVwZ3JkcG1zM3dwIn0.QUhvREtLO2bgPkj3CyG3vw'
    }).addTo(cardmap2);
    var marker2 = L.marker([33.6412, -117.9188], {
        icon: icon
    }).addTo(cardmap2);
    var cardmap3 = L.map('card-x-map3', {
        zoomControl: false,
        attributionControl: false
    }).setView([33.6412, -117.9188], 10);
    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        maxZoom: 18,
        id: 'mapbox.streets',
        accessToken: 'pk.eyJ1IjoiZGVyd2luMSIsImEiOiJjanVlZTF0encwMmthNDVwZ3JkcG1zM3dwIn0.QUhvREtLO2bgPkj3CyG3vw'
    }).addTo(cardmap3);
    var marker3 = L.marker([33.6412, -117.9188], {
        icon: icon
    }).addTo(cardmap3);
    var cardmap4 = L.map('card-x-map4', {
        zoomControl: false,
        attributionControl: false
    }).setView([33.6412, -117.9188], 10);
    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        maxZoom: 18,
        id: 'mapbox.streets',
        accessToken: 'pk.eyJ1IjoiZGVyd2luMSIsImEiOiJjanVlZTF0encwMmthNDVwZ3JkcG1zM3dwIn0.QUhvREtLO2bgPkj3CyG3vw'
    }).addTo(cardmap4);
    var marker4 = L.marker([33.6412, -117.9188], {
        icon: icon
    }).addTo(cardmap4);
    var cardmap5 = L.map('card-x-map5', {
        zoomControl: false,
        attributionControl: false
    }).setView([33.6412, -117.9188], 10);
    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        maxZoom: 18,
        id: 'mapbox.streets',
        accessToken: 'pk.eyJ1IjoiZGVyd2luMSIsImEiOiJjanVlZTF0encwMmthNDVwZ3JkcG1zM3dwIn0.QUhvREtLO2bgPkj3CyG3vw'
    }).addTo(cardmap5);
    var marker5 = L.marker([33.6412, -117.9188], {
        icon: icon
    }).addTo(cardmap5);
    var cardmap6 = L.map('card-x-map6', {
        zoomControl: false,
        attributionControl: false
    }).setView([33.6412, -117.9188], 10);
    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        maxZoom: 18,
        id: 'mapbox.streets',
        accessToken: 'pk.eyJ1IjoiZGVyd2luMSIsImEiOiJjanVlZTF0encwMmthNDVwZ3JkcG1zM3dwIn0.QUhvREtLO2bgPkj3CyG3vw'
    }).addTo(cardmap6);
    var marker6 = L.marker([33.6412, -117.9188], {
        icon: icon
    }).addTo(cardmap6);
    var cardmap7 = L.map('card-x-map7', {
        zoomControl: false,
        attributionControl: false
    }).setView([33.6412, -117.9188], 10);
    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        maxZoom: 18,
        id: 'mapbox.streets',
        accessToken: 'pk.eyJ1IjoiZGVyd2luMSIsImEiOiJjanVlZTF0encwMmthNDVwZ3JkcG1zM3dwIn0.QUhvREtLO2bgPkj3CyG3vw'
    }).addTo(cardmap7);
    var marker7 = L.marker([33.6412, -117.9188], {
        icon: icon
    }).addTo(cardmap7);
</script>