added state

src/client/js/components/Admin/SlackIntegration/CustomBotWithoutProxySettingsAccordion.jsx

@@ -1,9 +1,11 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 const CustomBotWithoutSettingsAccordion = () => {
   const { t } = useTranslation('admin');
 
+  const [currentOpenAccordionIndex, setCurrentOpenAccordionIndex] = useState(0);
+
   return (
     <div className="accordion my-5" id="withoutProxySettingsAccordion">
 
@@ -14,6 +16,7 @@ const CustomBotWithoutSettingsAccordion = () => {
             <button
               className="btn btn-link btn-block d-flex justify-content-between text-decoration-none"
               type="button"
+              onClick={() => setCurrentOpenAccordionIndex(0)}
             >
               ① Botを作成する
               <i className="fa fa-chevron-down"></i>
@@ -21,7 +24,7 @@ const CustomBotWithoutSettingsAccordion = () => {
           </h2>
         </div>
 
-        <div id="collapseOne" className="collapse show">
+        <div id="collapseOne" className={`collapse ${currentOpenAccordionIndex === 0 ? 'show' : ''}`}>
           <div className="card-body">
             <div className="row my-5">
               <div className="mx-auto">
@@ -42,6 +45,7 @@ const CustomBotWithoutSettingsAccordion = () => {
             <button
               className="btn btn-link btn-block d-flex justify-content-between text-decoration-none"
               type="button"
+              onClick={() => setCurrentOpenAccordionIndex(1)}
             >
               ② BotをSlackにインストールする
               <i className="fa fa-chevron-down"></i>
@@ -49,7 +53,7 @@ const CustomBotWithoutSettingsAccordion = () => {
           </h2>
         </div>
 
-        <div id="collapseTwo" className="collapse">
+        <div id="collapseTwo" className={`collapse ${currentOpenAccordionIndex === 1 ? 'show' : ''}`}>
           <div className="card-body">
             Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard
             dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla
@@ -68,6 +72,7 @@ const CustomBotWithoutSettingsAccordion = () => {
             <button
               className="btn btn-link btn-block d-flex justify-content-between text-decoration-none"
               type="button"
+              onClick={() => setCurrentOpenAccordionIndex(2)}
             >
               ③ Signing SecretとBot Tokenを登録する
               <i className="fa fa-chevron-down"></i>
@@ -75,7 +80,7 @@ const CustomBotWithoutSettingsAccordion = () => {
           </h2>
         </div>
 
-        <div id="collapseThree" className="collapse">
+        <div id="collapseThree" className={`collapse ${currentOpenAccordionIndex === 2 ? 'show' : ''}`}>
           <div className="card-body">
             Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard
             dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla
@@ -94,6 +99,7 @@ const CustomBotWithoutSettingsAccordion = () => {
             <button
               className="btn btn-link btn-block d-flex justify-content-between text-decoration-none"
               type="button"
+              onClick={() => setCurrentOpenAccordionIndex(3)}
             >
               ④ 連携状況のテストをする
               <i className="fa fa-chevron-down"></i>
@@ -101,7 +107,7 @@ const CustomBotWithoutSettingsAccordion = () => {
           </h2>
         </div>
 
-        <div id="collapseFour" className="collapse">
+        <div id="collapseFour" className={`collapse ${currentOpenAccordionIndex === 3 ? 'show' : ''}`}>
           <div className="card-body">
             Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard
             dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla