jQuery вкладки, заставляющие страницу загружаться в пределах содержимого вкладки, а не указанного содержимого

Question

Ниже мой код:

$(document).ready(function() {
	$("#admin-tabs").tabs();
});

#mogrify-admin {
	background: #eeeeee;
	width: 1000px;
	height: 800px;
}
.ui-tabs-vertical { width: 55em; }
.ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; }
.ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; }
.ui-tabs-vertical .ui-tabs-nav li a { display:block; }
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; }
.ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em;}

<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div class="mogrify-surveylist-welcome">
	<div id="mogrify-admin">
    	<h1>Welcome back, someone!</h1>
    
        <div id="admin-tabs">
        	<ul>
        		<li><a href="#tabs-home">Home</a></li>
        		<li><a href="#tabs-report-templates">Report Templates</a></li>
        		<li><a href="#tabs-statistics">Statistics</a></li>
        	</ul>
        	<div id="tabs-home">
        	</div>
        	<div id="tabs-report-templates">
        	</div>
        	<div id="tabs-statistics">
        	</div>
        </div>
    </div>
</div>

Тот же код хорошо работает со стековым потоком, но буквальное копирование и вставка рабочего кода по-прежнему приводит к тому, что вся веб-страница отображается внутри содержимого вкладки, а не указанного содержимого вкладки.