It's quite simple:
$('#hide_foo,#show_foo').on('click', function() {
$('#foo').toggle();
});
The elements #hide_foo and #show_foo are not buttons, but divs containing an image (kind of arrow-down and arrow-up respectively).
And it's just a section #foo to be hidden, not the complete <main> element:
<main>
<section id="foo">
<div id="hide_foo">
<img src="[[++assets_url]]images/godown.png" title="go down" alt=""/></a>
</div>
<!-- ------------content of #foo----------- -->
</section>
</main>
<aside>
<form>
<!-- ------------form items---------------- -->
</form>
<div id="show_foo">
<img src="[[++assets_url]]images/goup.png" title="go up" alt=""/></a>
</div>
</aside>
The div #show_foo below the list is needed in case the visitor wants to jump back without submitting the form.
Edit:
I'm sorry I cannot give you a link to the site, its not yet published.
[ed. note: ottogal last edited this post 9 years, 8 months ago.]