Why is my accordion in MVC 5 not rendering?

Question

I've installed jquery ui via nuget and setup the bundling as described in How to add jQueryUI library in MVC 5 project. Starting with the default MVC 5 project, I added following to RegisterBundles

        bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
        "~/Scripts/jquery-ui-{version}.js"));

        bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                "~/Content/themes/base/accordion.css",
                "~/Content/themes/base/all.css",
                "~/Content/themes/base/autocomplete.css",
                "~/Content/themes/base/base.css",
                "~/Content/themes/base/button.css",
                "~/Content/themes/base/core.css",
                "~/Content/themes/base/datepicker.css",
                "~/Content/themes/base/dialog.css",
                "~/Content/themes/base/draggable.css",
                "~/Content/themes/base/menu.css",
                "~/Content/themes/base/progressbar.css",
                "~/Content/themes/base/resizable.css",
                "~/Content/themes/base/selectable.css",
                "~/Content/themes/base/selectmenu.css",
                "~/Content/themes/base/slider.css",
                "~/Content/themes/base/sortable.css",
                "~/Content/themes/base/spinner.css",
                "~/Content/themes/base/tabs.css",
                "~/Content/themes/base/theme.css",
                "~/Content/themes/base/tooltip.css"));

And here is my Index.cshtml

@{
    ViewBag.Title = "Home Page";
}

@Scripts.Render("~/bundles/jqueryui")
@Styles.Render("~/Content/themes/base/css")

<script type="text/javascript">
    $(document).ready(function () {
        $("#accordion").accordion({ header: "h3", collapsible: true, active:  false });
    });
</script>

<div id="accordion">
    <h3>Section 1</h3>
    <div>
        <p>
            A
        </p>
    </div>
    <h3>Section 1</h3>
    <div>
        <p>
            A
        </p>
    </div>
    <h3>Section 1</h3>
    <div>
        <p>
            A
        </p>
    </div>
</div>

Yet when I run there is no apparent difference.

EDIT: FYI Here is My layout running in Fiddler

Oops. I forgot to add that in the post. When I run this I do get a javascript rte "$ is undefined" — WhiskerBiscuit, Oct 22 '15 at 03:08
In your browser developer tool, try to check if the js library is already exist — Mahmoud Hboubati, Oct 22 '15 at 07:11

score 1 · Answer 1 · answered Oct 22 '15 at 03:28

You need to add jquery in addition to jquery UI.

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
    "~/Scripts/jquery-{version}.js"));

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")
@Styles.Render("~/Content/themes/base/css")

Why is my accordion in MVC 5 not rendering?

1 Answers1