React + styled-components + CSSだけでアコーディオンメニュー実装してみる

環境

React 18.2.0
styled-components 5.3.6

完成図

今回は、このようなアコーディオンメニューを CSS だけで作っていきたいと思います。

解説編

下準備として、
アコーディオンメニューの Inside は、opacity を 0 にして透明にしておきます。
また Input は checkbox として扱いたいですが、checkbox のデフォルトの見た目が邪魔なので、 appearance を none にすることで消しています。

基本的にやっていることは単純で、Input がクリックされたら Inside の opacity を 1 にして表示させるというだけです。
Input に対して、&:checked + ${Inside}というように書くことで Inside を指定して操作できます。

以下のコードは、わかりやすいように必要箇所のみ表示していますので、
全容が知りたい方は CodeSandbox を確認してもらえればと思います。

~~~

const AccordionMenu = () => (
  <Wrapper>
    <Title>アコーディオンメニューだよ</Title>
    <Input />
    <Inside>
      <Item>テキストだよ1</Item>
      <Item>テキストだよ2</Item>
      <Item>テキストだよ3</Item>
    </Inside>
  </Wrapper>
);

const Inside = styled.div`
  height: 0;
  opacity: 0;
`;

const Input = styled.input.attrs({ type: "checkbox" })`
  appearance: none;
  position: absolute;
  padding: 8px;
  right: 0;
  cursor: pointer;
  :before,
  :after {
    content: "";
    position: absolute;
    display: block;
    width: 16px;
    height: 3px;
    top: 100%;
    right: 10px;
    background: #555;
    transform: translateY(-50%);
  }
  :after {
    transform: translateY(-50%) rotate(90deg);
    transition: 0.3s;
  }
  &:checked + ${Inside} {
    height: auto;
    opacity: 1;
  }
  &:checked {
    :after {
      transform: rotate(0);
      transition: 0.3s;
    }
  }
`;

~~~~

以上、CSS だけでアコーディオンメニューを実装する方法でした。

プラグインを入れてサクッと実装しても良いですが、
このように CSS だけでも簡単にアコーディオンメニューを実装できたりします。

今回はかなりシンプルでしたが、もう少し凝ったアニメーションをつけてみたりと、
色々試してみても楽しいかもしれません ✋