StackoverFlow Show/Hide without reloading

<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@3.0.0" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
   <div class="pdf-container">
  <h2>Show / Hide</h2>
    <div class="buttons">
      <button type="button">Hide</button>
    </div>
    <embed class="pdf" src="//www.ets.org/Media/Tests/TOEFL/pdf/SampleQuestions.pdf" width="550" height="800" type='application/pdf' />
</div>

<div class="pdf-container">
  <h2>Toggle PDFs</h2>
    <ul class="pdfs">
      <li class="active" data-pdf-url="//www.ets.org/Media/Tests/TOEFL/pdf/SampleQuestions.pdf">Sample pdf</li>
      <li data-pdf-url="//partners.adobe.com/public/developer/en/xml/AdobeXMLFormsSamples.pdf">Last Sample pdf</li>
    </ul>
    <embed class="pdf" width="550" height="800" type='application/pdf' />
</div>
  </body>

</html>

$(document).ready(function() {

	/* toggle show hide of pdf */
	$(document).on('click', '.pdf-container button', function(event){
		var $target = $(event.target);
		var $pdfViewer = $target.closest('.pdf-container').find('embed');

		if(!$pdfViewer){ return; }
		if($pdfViewer.is(':visible')){
			$pdfViewer.hide();
			$target.text('show');
			return;
		} 
			
		$pdfViewer.show();
		$target.text('hide');
	});
	
	/* load active pdf on page load ..*/
	function loadActivePDF(){
		var $pdfs = $('.pdfs li');
		if(!$pdfs){ return; }
		
		setPdfAsActive($pdfs.first('.active') || $pdfs[0]);
	}
	
	/* load actively marked PDF ....*/
	function setPdfAsActive($target){		
		$target.siblings().removeClass('.active');
		$target.addClass('.active');
		
		var $pdfViewer = $target.closest('.pdf-container').find('embed');
		if(!$pdfViewer){ return; }
		
		$pdfViewer.attr('src', $target.attr('data-pdf-url'));
		/* hack to re-initiate pdf REF: http://stackoverflow.com/questions/21269445/how-to-change-the-src-value-of-object-embed-tag-using-jquery*/
		$pdfViewer.replaceWith($pdfViewer.clone());
	}
	
	$(document).on('click', '.pdfs li', function(event){
		setPdfAsActive($(event.target));
	});
	
	loadActivePDF();	
});

  .pdf-container {
    width: 49%;
    max-height: 50%;
    float: left;
    overflow: scroll;
	
  }
  
  .pdf-container:not(:last-child) {
      padding-right: 5px;
  }

  .pdfs li.active {
    background-color: yellow;
  }

StackoverFlow | Show/Hide without reloading
http://stackoverflow.com/questions/39183156/show-hide-without-reloading