JQuery accordion not working in Razor page

Question

I've spent a few hours digging through here and other sites and can't find the answer. I'm trying to implement a simple accordion in a razor page, but no matter what I try it doesn't work. _Layout.cshtml:

    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="~/script.js"></script>
    <script>
        $(function () {
            $("#accordion").accordion();
        });
    </script>

cshtml:

@page
@model CRM.Pages.AdministrationModel
@{
}

<div id="accordion">
    <h3><a href="#">First header</a></h3>
    <div>First content</div>
    <h3><a href="#">Second header</a></h3>
    <div>Second content</div>
</div>

I've tried a lot of things: I installed the jquery nuget package and followed other instructions given to old questions to no avail.

Answer 1

I can only get error when I have one jquery js file put behind jquery-ui.js,.

I won't get any error even if I had several jquery js files put before jquery-ui.

You mentioned that installed the jquery nuget package and followed other instructions , I'm afraid you got some jquery js loaded behind jquery ui. Please uninstall unnecessary packages.

Answer 2

For MVC, put your JS scripts at the bottom of the page not the top like, you can use the following to fix it

 @await RenderSectionAsync("Scripts", required: false)

see What does this code of rendersection mean?