바닐라 자바스크립트로 토글버튼만들기

커몬·2022년 3월 22일
0

Vanilla Javascript

목록 보기
1/1
post-thumbnail

바닐라 자바스크립트 연습하는 중 간단한 UI부터 만들어 보는 것을 추천받음.
그래서 토글버튼을 만들어봄.

<div class="wrap">
	<button class="toggleBtn">토글</button>
	<p class="toggleTarget">
    	Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt, placeat. Reiciendis quia amet, quam nemo quos quod distinctio explicabo saepe cupiditate, quasi perspiciatis magnam.
    </p>
  </div>

HTML은 위와 같다.


.toggleBtn{
  display: block;
  width: 80px;
  height: 50px;
  margin: 50px auto 0;
}
.toggleTarget{
  width: 800px;
  margin: 20px auto 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: none;
}

.toggleTarget.on{
  display: block;
}

CSS는 위와 같다.


// 토글버튼 만들기
const _toggleBtn = _get('.toggleBtn')
const _toggleTarget = _get('.toggleTarget')


const toggleEvent = () => {
  if(_toggleTarget.className == 'toggleTarget'){
    _toggleTarget.className = 'toggleTarget on'
  } else {
    _toggleTarget.className = 'toggleTarget'
  }
}

_toggleBtn.addEventListener('click', toggleEvent)

JS는 위와 같다.


입문자는 잘 활용하면 좋겠다.
나도 초보지만 입문자일 때 이런 코드 직접 짜보려니 어려웠다.

profile
퍼블리셔 및 프론트엔드개발자

0개의 댓글