title: jQuery accordion in Razor: get same fields to appear in different accordion sections
body: <p>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? </p>
  
  <p>EDIT: Check out jsfiddle <a href="http://jsfiddle.net/jat7k" rel="nofollow">here</a></p>
  
  <p>Razor code:</p>
  
  <pre><code>&lt;div id="accordion"&gt;
      &lt;h3&gt;&lt;a href="#" class="acc-section"&gt;First header&lt;/a&gt;&lt;/h3&gt;
      &lt;div id="div1"&gt;
          &lt;fieldset&gt;
              @Html.LabelFor(model =&gt; defaultStudyEvent.GroupName, "Group Name")
              @Html.TextBoxFor(model =&gt; defaultStudyEvent.TimePoints)
          &lt;/fieldset&gt;
      &lt;/div&gt;
      &lt;h3&gt;&lt;a href="#" class="acc-section"&gt;Second header&lt;/a&gt;&lt;/h3&gt;
      &lt;div&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Rendered html:</p>
  
  <pre><code>&lt;div id="accordion"&gt;
      &lt;h3&gt;&lt;a href="#" class="acc-section"&gt;First header&lt;/a&gt;&lt;/h3&gt;
      &lt;div id="div1"&gt;
          &lt;fieldset id="f1"&gt;
              &lt;label for="defaultStudyEvent_GroupName"&gt;Group Name&lt;/label&gt;
              &lt;input id="defaultStudyEvent_TimePoints" name="defaultStudyEvent.TimePoints" type="text" value="" /&gt;
          &lt;/fieldset&gt;
      &lt;/div&gt;
      &lt;h3&gt;&lt;a href="#" class="acc-section"&gt;Second header&lt;/a&gt;&lt;/h3&gt;
      &lt;div&gt;(Move fieldset above to here when "Second header" is clicked)&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I've been playing with various options such as below but I'm not sure if this is the correct approach:</p>
  
  <pre><code>$(document).ready(function () {
      $('#accordion').accordion();
      $('.acc-section').click(appendFields);
  });
  
  function appendFields() {
      $('#accordion')
          .append($('#div1'))
          .accordion('destroy')
          .accordion();
  }
  </code></pre>