If you’re reading this you might be wondering why in the name of all that’s good and holy would you want to use the same fields in different sections of an accordion control? Surely the whole point of an accordion is that you display different content in different sections? Well read on…

I needed to do exactly this very recently, the main reason being that the screen I was working on would fit with corporate design guidelines. I’m currently working on a large C# .Net MVC3 application that utilises Razor, jQuery, and knockout.js on the front end. The interface is made up of a main partial view containing several tabs that present the data. The company has a corporate interface team that defines the GUI standards that every application must adhere to. Some of the tabs have accordions that show different information in each section, but the tab I’m currently working on has an accordion with 2 sections, each one containing the same fields except one. To me it doesn’t make sense to use an accordion for this, just use a radio button to toggle between the 2 differing fields. However I was overruled on this and told I must use the accordion as it fits in with the other tabs.

So to do it I initially started playing with the code below:

$('#accordion').append($('#div1')).accordion('destroy').accordion()

But this wouldn’t work for me at all, it kept adding a new section to the end of the accordion rather than recreating it. So I started to look at another approach and came up with the jQuery append() method which worked a treat.

Here’s the rendered Razor code:

<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>
    (Move "input-fields" fieldset to here when "Second header" is clicked)
  </div>
</div>

Then in jQuery do the following:

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

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

So this approach worked well for my situation. It will move the fields rather than create copies which is what I wanted. It’s suitable for an accordion if you have the same fields in different sections and don’t want to have duplicate fields all over the shop. It will also work in other scenarios if you just want to move fields dynamically depending on your particular scenario. Other variations of this approach are appendTo() and prepend() which do slightly different things.

Advertisements