Gallery thumbnails are all displayed on top of each other. How to space them out

The only way I could find to solve this was to use visibility:hidden; instead of display:none; for all except 1 of the gallery <div>s. In this way the galleries initiate properly, and then I use javascript to display 1 gallery at a time.

I realize this is not very efficient because when loading the page it loads ALL of the galleries (all required thumbnails) even though most of them are hidden. However this was the only way I could find to solve this.

(BTW, I have left “Gallery4 / Menu4” to show the original problem, just in case some smart person knows a more efficient way of solving this)

Here’s the code I’m using:

HTML:

    <div class="buttons">
    <ul>
      <li><a href="#" onclick="toggleVisibility('Menu1');">Gallery 1</a></li>
      <li><a href="#" onclick="toggleVisibility('Menu2');">Gallery 2</a></li>
      <li><a href="#" onclick="toggleVisibility('Menu3');">Gallery 3</a></li>
      <li><a href="#" onclick="toggleVisibility('Menu4');">Gallery 4</a></li>
    </ul>
    <center>
      <div class="gallery" id="Menu1">[foogallery id="356"]</div>
      <div class="gallery" id="Menu2" style="visibility: hidden;">[foogallery id="357"]
    </div>
      <div class="gallery" id="Menu3" style="visibility: hidden;">[foogallery id="356"]
    </div>
      <div class="gallery" id="Menu4" style="display: none;">[foogallery id="357"]
    </div>
    </center>

JAVASCRIPT:

    var divs = ["Menu1", "Menu2", "Menu3", "Menu4"];
    var visibleDivId = null;
    function toggleVisibility(divId) {
      if(visibleDivId === divId) {
        //visibleDivId = null;
      } else {
        visibleDivId = divId;
      }
      hideNonVisibleDivs();
    }
    function hideNonVisibleDivs() {
      var i, divId, div;
      for(i = 0; i < divs.length; i++) {
        divId = divs[i];
        div = document.getElementById(divId);
        if(visibleDivId === divId) {
          div.style.display = "block";
          div.style.visibility = "visible";
    
        } else {
          div.style.display = "none";
        }
      }
    }