Drupal 8 - creating an accordion field

Question

In Drupal 8 -- I want to modify the basic-page content type to be able to support an "accordion field type"

I've seen the list field type - that can have unlimited fields -- but I am looking for a solution that can feature -- header/body - type features.

Answer 1

There is no module to handle this for you, the solution is to create unlimited Entity Reference in your content type, it must have two fields, Title and Body as you want, and to convert it to accordions you should customize new entity field theme and implement accordion there.

Another solution is, handle it by https://www.drupal.org/project/views_bootstrap which support accordion or https://www.drupal.org/project/faqfield module :

Features:
Configurable default text formats
Configurable answer widget
Types: Normal textareas, textfields and formatable textareas
Formatable textareas for any Wysiwyg editor
Configurable number of rows for textarea widget
Field formatters
jQuery Accordion UI
Simple themeable text
Definition list (HTML <dl>)
Anchor link list
Accordion display options
Choose first active question
Collapse open questions
Event to open/collapse questions (eg. mouseover, click)

Answer 2

Drupal core sets you up well for your need--as it does several common UI requirements like accordions. You can reuse existing core assets pretty easily, and if this route meets your requirements, you'll get some admirable maintenance benefits from the fact that core gets more attention from the Drupal community than any given contrib module.

Two ways core could help:

• you can invoke the jQuery UI Accordion that ships with core.
• you can pattern something on the Toolbar Menu, which "Builds a nested accordion widget".

If the first option looks promising, the Examples module gives an example for how to use the core jQuery assets, specifically focusing on the accordion UI. (That's called serendipity incarnate!) Here's the javascript code:

(function ($) {

  'use strict';

  $(function () {
    $('#accordion').accordion();
  });
})(jQuery);

and here's the module code:

function js_example_theme() {
  return [
    'js_example_accordion' => [
      'template' => 'accordion',
      'variables' => ['title' => NULL],
    ],
  ];
}

Couldn't be easier. Note that if a custom module is less suited than adding the feature in your theme, you have either option available.