不在asp mvc中显示手风琴菜单

Question

我使用asp mvc创建了一个网站。

我需要在手风琴菜单中使用这个项目。

我添加了以下脚本：

<script src="~/Areas/Scripts/jquery-3.1.1.js"></script>
<link href="~/Content/DataTable/jquery.dataTables.min.css" rel="stylesheet" />
<script src="~/Scripts/DataTable/jquery.dataTables.min.js"></script>
<script src="~/Scripts/DataTable/dataTables.bootstrap.min.js"></script>
<link href="~/Content/DataTable/dataTables.bootstrap.min.css" rel="stylesheet" />
<!-- Bootstrap core CSS -->
<link href="~/Areas/css/bootstrap.min.css" rel="stylesheet">
<link href="~/Areas/css/bootstrap-reset.css" rel="stylesheet">
<!--external css-->
<link href="~/Areas/css/bootstrap.min.css" rel="stylesheet" />
<link href="~/Areas/assets/jquery-easy-pie-chart/jquery.easy-pie-chart.css" rel="stylesheet" type="text/css" media="screen">
<link rel="stylesheet" href="~/Areas/css/owl.carousel.css" type="text/css">
<!-- Custom styles for this template -->
<!-- Accurding -->
<link href="~/Areas/Content/StyleSheetAreas.css" rel="stylesheet" />
<link href="~/Content/StyleSheet.css" rel="stylesheet" />
<link href="~/Areas/css/style.css" rel="stylesheet" />
<link href="~/Areas/css/style-responsive.css" rel="stylesheet">
<script src="~/Areas/Scripts/jquery-ui.js"></script>
<script src="~/Areas/Scripts/jquery-ui-1.12.1.min.js"></script>
<script src="~/Areas/Scripts/jquery-ui-1.12.1.js"></script>
<link href="~/Areas/Content/jquery-ui.css" rel="stylesheet" />

和此：

    <script>
    $(function () {
        $("#accordion").accordion({
            collapsible: true
        });
    });
</script>

但它告诉我这个：