Breaks with Form mode control or Form Mode Manager

If I try and view the accordion that works on a default form view, in another form edit mode, the accordion class css changes.

I have tried both these modules with Form mode control or Form Mode Manager.

Any suggestion were I should be looking into this ...

*** What the default view looks like ***

<div class="effect-none field-group-accordion-wrapper js-wizard-processed ui-accordion ui-widget ui-helper-reset" role="tablist">

<h3 class="field-group-format-toggler accordion-item field-group-accordion-active ui-accordion-header ui-state-default ui-accordion-header-active ui-state-active ui-corner-top ui-accordion-icons" role="tab" id="ui-id-12" aria-controls="ui-id-13" aria-selected="true" aria-expanded="true" tabindex="0"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-s"></span>
  <a href="#" class="form-required">Overview</a>
</h3>
<div class="required-fields field-group-accordion-item field-group-format-wrapper ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" style="display: block; height: auto; width: auto;" id="ui-id-13" aria-labelledby="ui-id-12" role="tabpanel" aria-hidden="false">

*** What the first mode view looks like ***

<div class="effect-none field-group-accordion-wrapper js-wizard-processed">

<h3 class="field-group-format-toggler accordion-item field-group-accordion-active">
  <a href="#">Placement</a>
</h3>
<div class="required-fields field-group-accordion-item field-group-format-wrapper">