Click here to Skip to main content
13,559,868 members
Rate this:
Please Sign up or sign in to vote.
Hi, I've created a Jquery Accordion using 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)
        <div id = "accordiondiv">
            <p>Address: @item.Address</p>
            <p>Town: @item.Town</p>
            <p>Postcode: @item.PostCode</p>
            <p>PhoneNumber: @item.PhoneNumber</p>

$(function () {
    $("Accordion").click(function (evt) {
                url: "/Accordion/GetEmployeeDetails",
                type: 'POST',
             //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
Posted 17-Jan-13 3:17am
Updated 17-Jan-13 3:28am
Zoltán Zörgő 17-Jan-13 16:24pm
Any progress?

1 solution

Rate this: bad
Please Sign up or sign in to vote.

Solution 1

Have searched with google?
There are several solutions out there for how to populate accordion with ajax calls:[^]

Add "employeeid" as a custom attribute to the header, than you can retrieve it in the code[^]. You can use the change event[^] instead of click.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month

Advertise | Privacy | Cookies | Terms of Service
Web04 | 2.8.180527.3 | Last Updated 17 Jan 2013
Copyright © CodeProject, 1999-2018
All Rights Reserved.
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100