Question

I have a Razor view with several fields rendered from a View model, and I need the same fields to appear in different sections of an accordion (I don’t want to duplicate the fields in each section). I’m not sure of the best way to do this – do I put the fields in a partial view and somehow render/load the view dynamically when an accordion section is clicked, or after the code is rendered do I move/append the div containing the fields, or something else completely?

EDIT: Check out jsfiddle here

Razor code:

<div id="accordion">
    <h3><a href="#" class="acc-section">First header</a></h3>
    <div id="div1">
        <fieldset>
            @Html.LabelFor(model => defaultStudyEvent.GroupName, "Group Name")
            @Html.TextBoxFor(model => defaultStudyEvent.TimePoints)
        </fieldset>
    </div>
    <h3><a href="#" class="acc-section">Second header</a></h3>
    <div></div>
</div>

Rendered html:

<div id="accordion">
    <h3><a href="#" class="acc-section">First header</a></h3>
    <div id="div1">
        <fieldset id="f1">
            <label for="defaultStudyEvent_GroupName">Group Name</label>
            <input id="defaultStudyEvent_TimePoints" name="defaultStudyEvent.TimePoints" type="text" value="" />
        </fieldset>
    </div>
    <h3><a href="#" class="acc-section">Second header</a></h3>
    <div>(Move fieldset above to here when "Second header" is clicked)</div>
</div>

I’ve been playing with various options such as below but I’m not sure if this is the correct approach:

$(document).ready(function () {
    $('#accordion').accordion();
    $('.acc-section').click(appendFields);
});

function appendFields() {
    $('#accordion')
        .append($('#div1'))
        .accordion('destroy')
        .accordion();
}

Answer 1

Ah, now I understand the problem, based on the above comments. Sorry if my initial questions confused you. 🙂

I think you are on the right track – the following worked fine for me:

HTML

<div id="accordion">
    <h3 class="acc-header"><a href="#">First header</a></h3>
    <div>
        <fieldset id="input-fields">
            <label for="defaultStudyEvent_GroupName">Group Name</label>
            <input id="defaultStudyEvent_TimePoints" name="defaultStudyEvent.TimePoints" type="text" value="" />
        </fieldset>
    </div>
    <h3 class="acc-header"><a href="#">Second header</a></h3>
    <div>
    </div>
    <!-- more divs can be added -->
</div>

jQuery:

$(document).ready(function () {
    $('#accordion').accordion();
    $('.acc-header').click(moveFields);

    function moveFields() {
        $(this).next().append($('#input-fields'));
    }
});

Note that I added my own class for .acc-header. While you could use the built in jQuery UI classes, using your own makes sure this won’t break if a new UI version changes the class naming (not very likely, but still).

The above solution will make sure that you only ever use one set of the input fields, so you won’t receive any duplicate post data. The nifty thing with .append() is that it moves the thing you append, so you don’t have to remove anything afterwards.

As for “correct approach” I can’t say – but it seems like the cleanest way to do it if you ask me. Another possible approach would be to create the same fields for all accordion panes in the view, and in some way disable everyone except the ones in the active pane. Would need more JavaScript for that, however.