Javascript toggle w/ multiple divs, first div initially visible

I've got a page with multiple divs and a javascript toggle in place that swaps the visible div when you click the links, but I'd like to have the first div already visible when the page loads (myDiv1 in the code below).

Javascript here:

<script type="text/javascript">
document.load = function(){
    document.getElementById('myDiv1').style.display = 'block';
};
var currentActiveDiv;
toggleDiv = function(id){
    var domElement = document.getElementById(id);
    if (currentActiveDiv){
        var elementToHide = document.getElementById(currentActiveDiv);
        elementToHide.style.display = 'none';
    }
    domElement.style.display = 'block';
    currentActiveDiv = id;
};
</script>

HTML here:

<h3><a href="#" id="first option" onclick="toggleDiv('myDiv1');" class="homeheader">Div1</a>
<br>
<a href="#" id="first option" onclick="toggleDiv('myDiv2');" class="homeheader">Div2</a>
<br>
<a href="#" id="first option" onclick="toggleDiv('myDiv3');" class="homeheader">Div3</a>
<br>
<a href="#" id="first option" onclick="toggleDiv('myDiv4');" class="homeheader">Div4</a></h3>
</td>
<td width="50">
&nbsp;
</td>
<td width="500">
<br>
<br>
<div id="myDiv1" style="display:none;">
    <p class=textwhheader>
        Div 1 description.
    </p>
    <br>
    <a id='register' class="btn red pure-button pure-button-primary" style="font-size:13.33px; font-weight:700; line-height:26px; height:24px;vertical-align:middle;" href='mecplans.html' title="Click here to learn more.">
    Learn More </a>
</div>
<div id="myDiv2" style="display:none;">
    <p class=textwhheader>
        Div 2 description.
    </p>
    <br>
    <a id='register' class="btn red pure-button pure-button-primary" style="font-size:13.33px; font-weight:700; line-height:26px; height:24px;vertical-align:middle;" href='minimumplans.html' title="Click here to learn more.">
    Learn More </a>
</div>
<div id="myDiv3" style="display:none;">
    <p class=textwhheader>
        Div 3 description.
    </p>
    <br>
    <a id='register' class="btn red pure-button pure-button-primary" style="font-size:13.33px; font-weight:700; line-height:26px; height:24px;vertical-align:middle;" href='fixedindemnity.html' title="Click here to learn more.">
    Learn More </a>
</div>
<div id="myDiv4" style="display:none;">
    <p class=textwhheader>
        Div 4 description.
    </p>
    <br>
    <a id='register' class="btn red pure-button pure-button-primary" style="font-size:13.33px; font-weight:700; line-height:26px; height:24px;vertical-align:middle;" href='specialty.html' title="Click here to learn more.">
    Learn More </a>
</div>

I saw a question posted here before by someone who wanted the opposite (they had the div visible when the page loaded and DIDN'T want that), but they didn't have multiple divs and I wasn't able to glean much from it.