버튼 활성화 css

button {
  padding: 5px 15px; /* 버튼 디자인 */
  background-color: #303030;
  cursor: pointer;
  border: 1px solid #303030;
  color: #fff;
  border-radius: 0.25em;
}

button:hover {
  background-color: #706e6e;
}

button:active {
  background-color: #706e6e;
}

아코디언 페이지 (숨김, 펼치기)

<script>
      // 라디오 버튼 클릭 시 아코디언처럼 펼치는 함수
      function toggleAccordion(selectedOption) {
        // 모든 숨겨진 행을 선택
        const hiddenRows = document.querySelectorAll(".hidden-row");

        // 숨겨진 행들을 기본적으로 모두 숨김
        hiddenRows.forEach((row) => {
          row.style.display = "none";
        });

        // 선택된 옵션에 따라 특정 행을 표시
        if (
          selectedOption === "배송문의" ||
          selectedOption === "주문문의" ||
          selectedOption === "취소문의" ||
          selectedOption === "교환문의" ||
          selectedOption === "환불문의" ||
          selectedOption === "사은품문의" ||
          selectedOption === "입금문의" ||
          selectedOption === "상품문의" ||
          selectedOption === "선물문의"
        ) {
          document.getElementById("order-row").style.display = "table-row";
          document.getElementById("product-info-row").style.display =
            "table-row";
        }
        // 다른 조건들도 추가 가능
        // 예: if (selectedOption === "회원정보문의") { ... }
      }

      // 모든 라디오 버튼에 대한 이벤트 리스너 추가
      const radioButtons = document.querySelectorAll('input[type="radio"]');
      radioButtons.forEach((radio) => {
        radio.addEventListener("click", function () {
          toggleAccordion(this.value);
        });
      });
    </script>

---

수정할 사항: JavaScript 함수 충돌 문제 해결:

현재 코드에서 accordOrder와 accordProduct 함수가 모두 동일한 방식으로 동작하고 있습니다. 이를 하나의 함수로 통합하고, 필요에 따라 분기 처리하는 방식으로 수정해야 합니다.
조건문 오류 수정:

accordProduct 함수에서의 조건문에서 상품문의 옵션에 대한 처리에서 문법 오류가 있습니다. 조건문을 올바르게 수정하여야 합니다.
이벤트 리스너 중복 등록 문제:

현재 코드에서 라디오 버튼에 대한 이벤트 리스너를 두 번 등록하고 있습니다. 이를 하나의 루프로 합쳐서 중복 등록을 제거해야 합니다.
수정된 JavaScript 코드:
javascript
코드 복사
// 라디오 버튼 클릭 시 펼치는 함수
function toggleAccordion(selectedOption) {
// 모든 숨겨진 행을 선택
const hiddenRows = document.querySelectorAll(".hidden-row");

// 숨겨진 행들을 기본적으로 모두 숨김
hiddenRows.forEach((row) => {
row.style.display = "none";
});

// 선택된 옵션에 따라 특정 행을 표시
if (
selectedOption === "배송문의" ||
selectedOption === "주문문의" ||
selectedOption === "취소문의" ||
selectedOption === "교환문의" ||
selectedOption === "환불문의" ||
selectedOption === "사은품문의" ||
selectedOption === "입금문의" ||
selectedOption === "선물문의"
) {
document.getElementById("order-row").style.display = "table-row";
document.getElementById("order-info-row").style.display = "table-row";
} else if (selectedOption === "상품문의") {
document.getElementById("product-row").style.display = "table-row";
document.getElementById("product-info-row").style.display = "table-row";
}
}

// 모든 라디오 버튼에 대한 이벤트 리스너 추가
const radioButtons = document.querySelectorAll('input[type="radio"]');
radioButtons.forEach((radio) => {
radio.addEventListener("click", function () {
toggleAccordion(this.value);
});
});

"use strict";

const openBtn = document.querySelector(".modal-open");
const closeBtn = document.querySelector(".modal-close");
const modal = document.querySelector(".modal--bg");

openBtn.addEventListener("click", showModal);
closeBtn.addEventListener("click", closeModal);

function showModal() {
modal.classList.remove("hidden");
modal.classList.add("visible");
}

function closeModal() {
modal.classList.add("hidden");
modal.classList.remove("visible");
}
수정 후 확인해야 할 사항:
JavaScript 함수명을 toggleAccordion으로 통일하고, 필요에 따라 선택된 옵션에 따른 분기 처리를 올바르게 적용했습니다.
라디오 버튼에 대한 이벤트 리스너가 중복 등록되지 않도록 하였습니다.