As a follow-up of the idea https://planet4.greenpeace.org/idea/show-hide-plugin-for-qas/ a new P4 block, codename "Accordion" has been designed.

The idea is to have a block that allows collapsible menus, behaving exactly like the "Column" blocks > Tasks Style on mobile (see screencast attachement).

Tasks

• Implement the block based on the mock up provided (see below)
• The block should be WYSIWYG in the backend editor
• There should be two extra fields (Title & Description) similar to other blocks
• The block template should use jsx for both frontend and backend
• Add the block in beta group

Design specs:

Sketch file for design specs. 

New things to add ideally, otherwise for a second iteration:

• Add a standalone link (should be set in the side bar of the backend)
• Add the possibility to choose between a dark or a light theme
• Implement the chevron from the Sketch file as a SVG icon.

Chevron animation:

• Remove the animation at mouse hover. The animation should play only on click.