Using Javascript to load a new div without reloading the entire page.

display-div-content

<a name="blogfeed"></a>
<div class="usbln-blog-toggle" aria-hidden="true">
  <a class="usbln-blog-toggle-item" href="#blogfeed" onclick="toggleVisibility('usbln-dobe');">DOBE</a>
  <a class="usbln-blog-toggle-item" href="#blogfeed" onclick="toggleVisibility('usbln-events');">Events</a>
  <a class="usbln-blog-toggle-item" href="#blogfeed" onclick="toggleVisibility('usbln-news');">News</a>
  <a class="usbln-blog-toggle-item" href="#blogfeed" onclick="toggleVisibility('usbln-partners');">Partners</a>
  <a class="usbln-blog-toggle-item" href="#blogfeed" onclick="toggleVisibility('usbln-students');">Students</a>
  <a class="usbln-blog-toggle-item" href="#blogfeed" onclick="toggleVisibility('usbln-videos');">Videos</a>
  <a class="usbln-blog-toggle-item" href="#blogfeed" onclick="toggleVisibility('usbln-all');">All</a>
</div>
<div class="usbln-blog-main">
	<div class="usbln-blog-feed">
		<div id="usbln-all">
			<?php
			//list 10 latest posts in the "Blog" category
			?>
			<a href="#blogfeed" onclick="toggleVisibility('usbln-all-more');"><span class="usbln-blog-feature-readmore">Load More</span></a><br class="clear" />
		</div>
		<div id="usbln-all-more" style="display: none;">
			<?php
			//list all latest posts in the "Blog" category
			?>
		</div>
		<div id="usbln-events" style="display: none;">
			<?php
			//list all latest posts in the "News" category
			?>
			<?php//option to view next 10 posts?>
		</div>
	</div>
</div>

load-new-div

<script type="text/javascript">	
	var divs = ["usbln-all", "usbln-all-more", "usbln-news", "usbln-news-more","usbln-events", "usbln-partners", "usbln-students", "usbln-dobe", "usbln-videos"];
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";
    } else {
      div.style.display = "none";
    }
  }
}
</script>