ASP.NET MVC / Jquery Accordion - How to perform the following ajax request on Jquery Accordion?

See more:

Ajax

MVC

jQuery

MVC4

jQuery-UI

Hi, I've created a Jquery Accordion using Asp.net mvc, and it's working fine. The accordion displays a list of employee names, and when i click on an item, it shows the details. I'd like to send an ajax request to get the employee details when they click on an item, instead of loading all the employee details at once. Please look at my code below.

Also, please tell me how to keep the first item in the accordion collapsed instead of showing the details, and is there any way to move the heading a bit to the right without using &nbsp ?

I would greatly appreciate any help - thanks.

<div id="accordion">
    @foreach (var item in Model.Employees)
    {
        <h3>&nbsp;&nbsp;&nbsp;&nbsp;@item.EmployeeName</h3>
        <div id = "accordiondiv">
            <p>Address: @item.Address</p>
            <p>Town: @item.Town</p>
            <p>Postcode: @item.PostCode</p>
            <p>PhoneNumber: @item.PhoneNumber</p>
        </div>
    }
</div>

<script>
$(function () {
    $("Accordion").click(function (evt) {
                $.ajax({
                url: "/Accordion/GetEmployeeDetails",
                type: 'POST',
                data:
             //need code to pass the employeeid that was clicked on the accordion,
                success: function (data) {
                    $.each(data, function (i, val) {
            //need code to populate the respective accordion with the employee details
                    });
                }
            });
        }
    });
</script>