Seems to be working as expected, after adding style to set height on map1 and map2 containers:

#map1, #map2 {
  height: 500px;
}

mapboxgl.accessToken = 'access_token';

var a = -79.5,
  b = 35,
  c = -69.5,
  d = 45,
  p = -74.5,
  q = 40,
  e = -79.5,
  f = 35,
  g = -69.5,
  h = 45,
  y = -74.5,
  z = 40;

// Set bounds
var bounds = [
  [e, f], // Southwest coordinates
  [g, h, ] // Northeast coordinates
];
var map = new mapboxgl.Map({
  container: 'map1',
  style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location
  center: [p, q],
  zoom: 12.3,
  maxBounds: bounds // Sets bounds as max
});
// Add zoom and rotation controls to the map.
map.addControl(new mapboxgl.NavigationControl());
map.addControl(new mapboxgl.FullscreenControl(), 'top-left');

// Set bounds
var bounds = [
  [a, b], // Southwest coordinates
  [c, d, ] // Northeast coordinates
];
var map = new mapboxgl.Map({
  container: 'map2',
  style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location
  center: [y, z],
  zoom: 9.8,
  maxBounds: bounds // Sets bounds as max
});
// Add zoom and rotation controls to the map.
map.addControl(new mapboxgl.NavigationControl());
map.addControl(new mapboxgl.FullscreenControl(), 'top-left');

function openTab(evt, era) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(era).style.display = "block";
  evt.currentTarget.className += " active";
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();

#map1,
#map2 {
  height: 500px;
}

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

<div class="tab">
  <button class="tablinks" onclick="openTab(event, 'part1')" id="defaultOpen">ABC DEF</button>
  <button class="tablinks" onclick="openTab(event, 'part2')">GHI JKL</button>
</div>
<div id="part1" class="tabcontent">
  <div id="map1"></div>
</div>

<div id="part2" class="tabcontent">
  <div id="map2"></div>
</div>

I am using maps from mapbox which doesn’t load full on clicking the tabs.

On clicking the tab, map gets resized into 50% of the original size (not sure why this is happening).

The html/javascript of map is shown below:

<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.3.1/mapbox-gl.js'></script>

<strong><div class="tab"><button class="tablinks" onclick="openTab(event, 'part1')" id="defaultOpen">ABC DEF</button><button class="tablinks" onclick="openTab(event, 'part2')">GHI JKL</button></div></strong>
<div id="part1" class="tabcontent">

<div id="map1"></div> 
</div>

<div id="part2" class="tabcontent">

<div id="map2"></div>
</div>


<script>
mapboxgl.accessToken = 'hello';
// Set bounds
var bounds = [
    [e, f], // Southwest coordinates
    [g, h, ]  // Northeast coordinates
];
var map = new mapboxgl.Map({
    container: 'map1',
    style: 'mapbox://styles/abcdef',
    center: [p, q],
    zoom: 12.3,
    maxBounds: bounds // Sets bounds as max
});
// Add zoom and rotation controls to the map.
map.addControl(new mapboxgl.NavigationControl());
map.addControl(new mapboxgl.FullscreenControl(), 'top-left');
</script>

<script>
mapboxgl.accessToken = 'hello';
// Set bounds
var bounds = [
    [a, b], // Southwest coordinates
    [c, d, ]  // Northeast coordinates
];
var map = new mapboxgl.Map({
    container: 'map2',
    style: 'mapbox://styles/abcdef',
    center: [y, z],
    zoom: 9.8,
    maxBounds: bounds // Sets bounds as max
});
// Add zoom and rotation controls to the map.
map.addControl(new mapboxgl.NavigationControl());
map.addControl(new mapboxgl.FullscreenControl(), 'top-left');
</script>

<script>
function openTab(evt, era) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(era).style.display = "block";
    evt.currentTarget.className += " active";
}
   // Get the element with id="defaultOpen" and click on it
   document.getElementById("defaultOpen").click();
</script>

Problem Statement: I am wondering what changes I need to make in the script above so that it loads completely on tab click (doesn't get resized into 50% of the original size)