jQuery tabs does not load correctly
Using bootstrap and loaded the jQuery tabs function this is the code . in live view it looks great but when I goto the live view it looks the same as the code view. Looks like I am not calling a function, All the css files and js files are displayed across the top line with t source code.
What have I done wrong?
in the head tag
<link href="jQueryAssets/jquery.ui.core.min.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery.ui.theme.min.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery.ui.tabs.min.css" rel="stylesheet" type="text/css">
<meta http-equiv="" content="">
<meta name="keywords" content="">
<script src="jQueryAssets/jquery-1.11.1.min.js"></script>
<script src="jQueryAssets/jquery.ui-1.10.4.tabs.min.js"></script>
in the body
<div id="Tabs1">
<ul>
<li><a href="#tabs-1">Tab 1</a></li>
<li><a href="#tabs-2">Tab 2</a></li>
<li><a href="#tabs-3">Tab 3</a></li>
</ul>
<div id="tabs-1">
<p>Content 1</p>
</div>
<div id="tabs-2">
<p>Content 2</p>
</div>
<div id="tabs-3">
<p>Content 3</p>
</div>
</div>
at the end
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap-4.4.1.js"></script>
<script type="text/javascript">
$(function() {
$( "#Tabs1" ).tabs();
});
</script>
AdChoices