to teach Plone to play accordion, you could use CSS with Ambidexterity. Click on Edit view when having your type selected, Ambidexterity will display something like 'editing view for lawn_care/monthly care', don't believe a word of it, it is really a view for the whole type, not a specific field.
Then remove the central part of the default view, the one with
<p>
This is the default Ambidexterity view for <span tal:replace="context/portal_type">portal type</span>.
</p>
and replace with something like that:
<style media="screen" type="text/css">
.kgp_acc .fs .fsc { display: none; }
.kgp_acc .fs:target .fsc { display: block; }
</style>
<div class="kgp_acc">
<fieldset class="fs" id="intro">
<legend><a href="#intro">intro</a></legend>
<div class="fsc">
<dd tal:content="structure context/set_expectations/output"></dd>
</div>
</fieldset>
<fieldset class="fs" id="monthly_care">
<legend><a href="#monthly_care">monthly_care</a></legend>
<div class="fsc">
<dd tal:content="structure context/monthly_care/output"></dd>
</div>
</fieldset>
</div>
I think that I have your fields name right so it should work right out of the box. If not you will have to adapt a bit.
A few caveats:
-
first this is a very simplistic solution. 2 days ago the most I did know about CSS is that it existed. I have searched the net, there are tons of sample CSS everywhere from masters, I have found inspiration on this one: Simple accordion but obviously my skills are still at the kindergarten level and any experienced web designer could certainly do a lot better. Tabs could certainly be done in a similar way.
-
adding Css styling directly inline is frowned upon generally, the usual recommended way is to add a resource from a file. In this case of a proof of concept solution it's clearer.
-
in taking over the display for the article with Ambidexterity, there is no more automatic synchronization between existing fields and the display form. If a field is removed from the model or renamed, bad things will happen. I don't think that with ambidexterity in its current form it's possible to do otherwise but I may be wrong.
Finally as of the 'bug', I think that it comes from a focus problem: when you are adding a fieldset, you think that by following directly to add field it will be added to the new fieldset, in fact the focus is not switched to the new fieldset, it stays at the default level. Fields can be added directly to the 'default' fieldset too. The UI of DX configuration has bad problems with focus and refreshing. If you follow a slower procedure of adding the fieldset, clicking the new fieldset, add the field it will work better (at least on 5.1 - I did not check 5.0)