BootStrap - Acodian (아코디언) [React와 함께]

Acodian

 

사용법의 1번 [제목,본문] 과 2번[제목,본문]이

연결되어 있음

 

따라서 일반적으로 반복문을 찍으면 같이 움지임

 

따라서 인덱스 번호로 여러개의 아코디언을 나누어 주고,

홈페이지를 들어갔을때 index 가 0이면 펼쳐져있고

아니면 접히게 되는 코드

      {/* accodian start (반복문) */}
      <div className="col-md-12">
        <div className="accordion" id="accordionExample">
          {/* 1st 아코디언 시작 */}
          {/* 반복문 : faq.map((data , index)=> (아코디언 태그)) */}
          {faq &&
            faq.map((data, index) => (
              <div className="accordion-item" key={index}>
                {/* 사용법 : 1) h2(제목)  : id="headingOne" */}
                {/*          1) div(본문) : aria-labelleby="headingOne" */}
                {/* 사용법 : 2) h2(제목)  :  data-bs-target="#collapseOne" */}
                {/*          2) div(본문) : id="collapseOne" */}
                {/* 사용법 : (h2[제목]) 화면 보이기/안보이기 css(class) */}
                {/*                         펼치기 : className="accordion-button" */}
                {/*                         접기   : className="accordion-button collapsed" */}
                {/*          (div[본문]) */}
                {/*                         펼치기 : className="accordion-collapse collapse show" */}
                {/*                         접기 : className="accordion-collapse collapse" */}
                {/* 아코디언 제목 */}
                <h2 className="accordion-header" id={`heading${index}`}>
                  <button
                    // 인덱스가 0이면 펼치기 아니면 접기
                    className={
                      index === 0
                        ? "accordion-button"
                        : "accordion-button collapsed"
                    }
                    type="button"
                    data-bs-toggle="collapse"
                    data-bs-target={"#collapse" + index} // 2) 얘랑 (본문부분 id랑) 연결되어있음
                    aria-expanded="true"
                    aria-controls={"collapse" + index}
                  >
                    {data.title}
                  </button>
                </h2>
                {/* 아코디언 본문 */}
                <div
                  id={"collapse" + index} // 2) (제목무분 data-bs-target) 얘랑 연결 되어있음
                  // 인덱스가 0이면 펼치기 아니면 접기
                  className={
                    index === 0
                      ? "accordion-collapse collapse show"
                      : "accordion-collapse collapse"
                  }
                  data-bs-parent="#accordionExample"
                  aria-labelleby={"headingOne" + index}
                >
                  <div className="accordion-body">
                    {data.content} &nbsp;
                    <Link to={"/faq/" + data.no}>
                      <span className="badge bg-success">Edit</span>
                    </Link>
                  </div>
                </div>
              </div>
            ))}
        </div>
      </div>
      {/* accodian end */}