JAVASCRIPT

[Javascript] 아코디언 메뉴 만들기

0에서100 2024. 2. 3. 17:33
728x90
반응형

아주 간단하게 아코디언 메뉴를 만들 수 있다. 저는 이렇게 아코디언 메뉴와 함께 해당 사진도 옆에서 나오게하는 애니메이션을 만들어 보았다.

 

HTML

  <div class="section">
    <div class="inner">
      <div class="photo-box">
        <div class="photo photo-active">
          <p>1번 사진입니다.</p>
        </div>
        <div class="photo">
          <p>2번 사진입니다.</p>
        </div>
        <div class="photo">
          <p>3번 사진입니다.</p>
        </div>
        <div class="photo">
          <p>4번 사진입니다.</p>
        </div>
        <div class="photo">
          <p>5번 사진입니다.</p>
        </div>
      </div>
      <ul class="aco-box">
        <li class="aco-list">
          <p>리스트 1번입니다.</p>
          <div class="content content-on">
            <p>리스트 1번 내용입니다.</p>
          </div>
        </li>
        <li class="aco-list">
          <p>리스트 2번입니다.</p>
          <div class="content">
            <p>리스트 1번 내용입니다.</p>
          </div>
        </li>
        <li class="aco-list">
          <p>리스트 3번입니다.</p>
          <div class="content">
            <p>리스트 3번 내용입니다.</p>
          </div>
        </li>
        <li class="aco-list">
          <p>리스트 4번입니다.</p>
          <div class="content">
            <p>리스트 4번 내용입니다.</p>
          </div>
        </li>
        <li class="aco-list">
          <p>리스트 5번입니다.</p>
          <div class="content">
            <p>리스트 5번 내용입니다.</p>
          </div>
        </li>
      </ul>
    </div>
  </div>

aco-list안에 content를 넣어준다. 

 

CSS

.section{
  padding: 0 120px;
}

.inner{
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.photo-box{
  width: 500px;
  height: 800px;
  position: relative;
}

.photo{
  width: 100%;
  height: 100%;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  left: -500px;
  transition: left 0.6s;
}

.photo-active{
  left: 0px;
}

.photo:nth-child(1){
  background-color: aqua;
}
.photo:nth-child(2){
  background-color:blueviolet;
}
.photo:nth-child(3){
  background-color:chartreuse;
}
.photo:nth-child(4){
  background-color:cornflowerblue;
}
.photo:nth-child(5){
  background-color:gold;
}

.aco-box{
  width: 600px;
  border-top: 3px solid black;
}

.aco-list{
  width: 100%;
  padding: 40px;
  font-size: 40px;
  cursor: pointer;
  border-bottom: 3px solid black;
}

.content{
  height: 0;
  transition: all 0.6s;
  visibility: hidden;
}

.content-on{
padding-top: 100px;
  visibility: visible;
  height: 54px;
}

photo-active와 content-on이라는 사진과 내용을 활성화시켜주는 클래스를 미리 만들어주고 탈부착하는 방식으로 만들 것이다. 

 

JAVASCRIPT

for(let i = 0; i < document.querySelectorAll('.photo').length; i++){
  document.querySelectorAll('.aco-list')[i].addEventListener('click',()=>{
    document.querySelectorAll('.photo').forEach(e=>{
      e.classList.remove('photo-active');
    });
    document.querySelectorAll('.content').forEach(e=>{
      e.classList.remove('content-on');
    });
    document.querySelectorAll('.photo')[i].classList.add('photo-active');
    document.querySelectorAll('.content')[i].classList.add('content-on');
  });
}

for반복문을 이용하여 각 리스트를 클릭했을 때 번호에 맞는 내용과 사진이 나오게 클래스를 부여해주었다. 클래스를 부여하기 전에 모든 활성화 클래스들을 지워주고 부여해야 잘 작동한다.

클래스를 지워주는 코드를 보면 forEach 반복문들 사용하는 것을 볼 수 있는데 querySelectorAll을 검사해보면 nodelist라는 array자료로 나오기 때문에 바로 클래스를 제거하는 코드를 붙이면 오류가 난다. 따라서 forEach 반복문으로 파라미터를 뚫어서 클래스를 지워준다. 파라미터는 array자료의 요소들을 가리킨다.

728x90
반응형