show / hide color sections with portfolio elements

I am trying to customize 4 buttons on a page to show/hide color sections that contain portfolio categories – with live sort.
(i can’t use the pagination feature, as it loads an entire new page)
all of the images load fine for the initial Div – however, when i click on the other buttons to show the corresponding div, it only populates one image in that category – as opposed to multiple images that are in that portfolio.

I am using this code in codeblock:

<script type="text/javascript">
  function showItems(divId) {
    hideItems();
    jQuery(divId).css('display', 'block');
  }
  function hideItems() {
    jQuery('#av_section_1').css('display', 'none');
    jQuery('#av_section_2').css('display', 'none');
    jQuery('#av_section_3').css('display', 'none');
    jQuery('#av_section_4').css('display', 'none');
  }

jQuery(window).load(function() {
    showItems('#av_section_1');
});
</script>

<button onclick="showItems('#av_section_1');">Brick & Stone</button>
<button onclick="showItems('#av_section_2');">Flatwear</button>
<button onclick="showItems('#av_section_3');">Stamped</button>
<button onclick="showItems('#av_section_4');">Walls</button>

any idea what is going on? It seems when i hide the other three divs on load – it messes with how they are viewed.
thanks!