accordion is not a function in asp.net mvc

Question

I am not getting any output. Can anyone help me out of this problem?

I have been working on this MVC project in ASP.net for a few days. I want to integrate the jQuery-UI in my project. I imported all the required files but I did not get any output. I am including sample accordion code below.

<div id="acc">
<h4>Section1</h4>
    <div>
        Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate. 
    </div>
<h4>Section2</h4>
    <div>
        Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. 
    </div>
<h4>Section3</h4>
    <div>
        Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. 
    </div>
</div>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery-ui.min.js"></script>
<link href="~/Content/jquery-ui.css" rel="stylesheet" />
<script>
    $(document).ready(function ()
    {
        $("#acc").accordion({event:"mouseover"});
    }
    );
</script>

Answer 1

Your code looks fine - see the snippet below where I took the HTML and replaced the relative included JS/CSS files and replaced them with those from the Google hosted Libraries CDN. One option is to use those files hosted from Google or another host, which can offer advantages like quicker load time potentially for users around the world (see this answer for more information).

If you continue to host your own files, ensure that the files are being downloaded properly. In most browsers, you can press F12 to load the browser console. For more information, check out the video on this page. You might see errors like the 404 error in the image below, where the CSS file was not found:

$(document).ready(function() {
  $("#acc").accordion({
    event: "mouseover"
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="acc">
  <h4>Section1</h4>
  <div>
    Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum
    a velit eu ante scelerisque vulputate.
  </div>
  <h4>Section2</h4>
  <div>
    Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.
  </div>
  <h4>Section3</h4>
  <div>
    Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam
    nisi, eu iaculis leo purus venenatis dui.
  </div>
</div>

Answer 2

1. Make sure jQuery UI library script is included in your page and
2. Make sure it is included AFTER jQuery itself.
3. Ensure when the browser is requesting these files, they are returned by the server. Use Chrome, or any browser's, debugger and go to the network tab. Then refresh the page and make sure a request is made to get these files and the response is not an error. If it is an error because it cannot find the file, then fix the path so it can find it.

Answer 3

Make sure to include jquery UI after loading of Jquery, asp.net mvc loads jquery as part of _layout.cshtml, make sure include jquery ui in this file after @Scripts.Render("~/bundles/jquery").

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>