Question

Im having some problems implementing an jQuery UI Accordion widget on my site.

I list with a heading, that i wan’t to be able to colapse/expand.
For this im trying to use the jQuery UI Accordion widget.

But for some reason its not working.

I have this razor view:

<div id="parameter_accordion">
<h3>Parameters</h3>

    @foreach (var item in Model)
    {
        <div>
            <p>@item.Name</p>
        </div>    
    }

The div tag is “pointing” to the function in my JS file (“ConfigApplication.js”):

$("#parameter_accordion").accordion();

Im importing this file along with all the Jquery files in the _Layout.cshtml:

<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/themes/base/jquery.ui.all.css")" rel="stylesheet" type="text/css" />

<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/ConfigApplication.js")" type="text/javascript"></script>

but for some reason the view is not showing as a accordion. Its shoving all content, all the time. Can anyone see what i’m doing wrong?

Answer 1

The general html for a jquery accordion follows the following standard:

<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>

Therefore, if you are wanting only one header, then you should not have the div inside the foreach loop and it should look like this:

<h3><a href="#">Parameters</a></h3>

<div>
    @foreach (var item in Model)
    {
        <p>@item.Name</p>
    }
</div>  

However, if you are wanting a header for each section, you need to have a <h3> with an anchor tag within it for each unique section. So you should include the tag within the foreach loop. It would look something like this:

@foreach (var item in Model)
{
    <h3><a href="#">@item.Name</a></h3>
    <div>
        <p>@item.Name</p>
    </div>    
}

Also to note, the accordion is not collapsible by default and you need to add that option in order to allow it to be collapsed completely.

$("#parameter_accordion").accordion({ collapsible: true });

Check out the demo for the jquery UI accordion for more information.