Practice) Accordion

zooyeong·2023년 3월 22일

8주차

목록 보기

3/6

🔥아코디언 만들기 연습!

🔽HTML 코드

<body>

  <h3>상단가운데문구</h3>
  <div class="container">

    <table class="table">
      
      <thead>
        <tr>
          <th scope="col">#</th>
          <th scope="col">Title</th>
          <th scope="col">Last</th>
          <th scope="col">Handle</th>
        </tr>
      </thead>
      
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>
            <div class="item-container">
              <p class="item-title">Mark</p>
              <div class="item-content">
                <p>여기에 숨겨진 내용</p>
                <p>여러줄이 나올 수 있음</p>
              </div>
            </div>
          </td>
          <td>Otto</td>
          <td>@mdo</td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>
            <div class="item-container">
              <p class="item-title">Mark2</p>
              <div class="item-content">
                <p>여기에 숨겨진 내용</p>
                <p>여러줄이 나올 수 있음</p>
              </div>
            </div>
          </td>
          <td>Thornton</td>
          <td>@fat</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>
            <div class="item-container">
              <p class="item-title">Mark3</p>
              <div class="item-content">
                <p>여기에 숨겨진 내용</p>
                <p>여러줄이 나올 수 있음</p>
              </div>
            </div>
          </td>
          <td></td>
          <td>@twitter</td>
        </tr>
      </tbody>
      
    </table>
  </div>
</body>

🔽CSS 코드

h3{
  text-align: center;
}
.container{
  width: 600px;
  margin: 0 auto;
}

🚩현재 상태

next step) Mark 아래의 내용을 숨겨보도록 하겠다.

🔽CSS 코드

h3{
  text-align: center;
}
.container{
  width: 600px;
  margin: 0 auto;
}
.item-title{
  font-weight: bold;
  color: darkblue;
  cursor: pointer; /* 누를 수 있을 것 같은 효과*/
}
.item-content{
  height: 0px;
  overflow: hidden;
  /* hidden->height가 0이라 밖으로 삐져나온 부분을 숨겨준다! */
}

🚩현재 상태

next step) Mark를 누르면 숨긴 내용을 보여주는 기능을 추가해보겠다.

🔽CSS 코드

h3{
  text-align: center;
}
.container{
  width: 600px;
  margin: 0 auto;
}
.item-title{
  font-weight: bold;
  color: darkblue;
  cursor: pointer;
}
.item-content{
  height: 0px;
  overflow: hidden;
  transition-property: all; /* 부드럽게 변하는 효과 */
  transition-duration: 1s; /* 부드럽게 변하는 효과 */
}

🔽js 코드

const itemTitles = document.querySelectorAll('.item-title');
console.log(itemTitles);
for(let i=0; i<itemTitles.length; i++){
  itemTitles[i].addEventListener('click', function(){
    console.log('클릭됨');
    console.log(itemTitles[i]);
    let itemContents = document.querySelectorAll('.item-content');
    console.log(itemContents);
 
    if(itemContents[i].classList.contains('active')){
      itemContents[i].classList.remove('active');
    } else{
      itemContents[i].classList.add('active');
    }
  });
}

🚩현재 상태

next step) Mark를 눌렀을 때 다른 내용이 열려있으면 닫고 해당 Mark의 내용만 열리게 만들어보겠다.

🔽js 코드

const itemTitles = document.querySelectorAll('.item-title');

console.log(itemTitles);

for(let i=0; i<itemTitles.length; i++){
  itemTitles[i].addEventListener('click', function(){

    console.log('클릭됨');
    console.log(itemTitles[i]);

    let itemContents = document.querySelectorAll('.item-content');
    console.log(itemContents);
    
    if(itemContents[i].classList.contains('active')){
      itemContents[i].classList.remove('active');
    } else{
      for(let el of itemContents){
        el.classList.remove('active');
        //for문을 통해 열려있는 내용을 닫아주기
      }
      itemContents[i].classList.add('active');
    }
  })
}

🚩현재 상태

zooyeong

Have a good day ⌯’▾’⌯

이전 포스트

jQuery

다음 포스트

Practice) Accordion

8주차

🔥아코디언 만들기 연습!

jQuery

localStorage

0개의 댓글