如何将普通标签回收到手风琴标签？

Question

如何将普通标签回收为手风琴标签？
像这样： http://i.piccy.info/i9/580b50486398c499c32df544d1d0cab1/1567521219/48098/1334636/1.jpg

选项卡从上到下放置，当您单击选项卡时，内容将显示在按下的选项卡和下一个选项卡之间。如图所示，我上面写的链接。

带有html和css的普通标签的所有代码：
https://jsfiddle.net/nathan111777/n8p9dx4v/4/

const TabContent = ({ content }) => (
  <div className="accordion">
    <p>{content}</p>
  </div>
);

function Tabs({ items }) {

  const [active, setActive] = React.useState(0);


  const openTab = e => {
    setActive(+e.target.dataset.index);
  };

  return (
    <div>
      <div className="tab">
        {items.map((n, i) => (
          <button

            key={i}
            className={`tablinks${i === active ? ' active' : ''}`}
            onClick={openTab}
            data-index={i}
          >
            {n.title}
          </button>
        ))}
      </div>
      {items[active] && <TabContent {...items[active]} />}
    </div>
  );
}


const items = [
  {
    title: 'First',
    content:
      '1. Some content'
  },
  {
    title: 'Second',
    content:
      '2. Many content Many content Many content.'
  },
  {
    title: 'Third',
    content:
      '3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut .'
  }
];

ReactDOM.render(<Tabs items={items} />, document.getElementById('app'));