티스토리 뷰

xhtml/css

CSS만으로 toggle 구현하기

sosohot 2017. 8. 11. 14:31

[소스]

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
 
        /* 자바스크립트 click이벤트 없이 CSS만으로 toggle 구현하기 */
 
        input {
            
            /* 체크박스를 버튼으로 사용하기 위해 숨긴다. */
            position:fixed; 
            left:-9999px;
        }
 
        #box {
            width: 20px;
            height: 20px;
            background: skyblue;
        }
 
 
        :checked ~ #box { /* 일반 형제 선택 */
            height:100px !important;
        }
 
        .transition { /* 크기 애니메이션 적용  */
    transition: height 0.1s ease-in-out;                
        }
 
    </style>
</head>
<body>
  <div id="wrapper">
 
    <input type="checkbox" id="toggleBtn" />
    <label for="toggleBtn">
      toggleBtn
    </label>

    <div id="box" class="transition"></div>    

  </div>
</body>
</html>


[view]

http://jsbin.com/fasakoyiyu/edit?html,output

저작자표시

'xhtml/css' 카테고리의 다른 글

익스플로러 IE 만 css 적용 방법  (0) 2020.05.15
상, 하단 2단 레이아웃 화면 100% 유지  (0) 2017.08.11
테이블 상단 고정 스크롤  (0) 2017.08.11
placeholder 에서 줄바꿈하기  (0) 2017.01.04
[참고용]네이밍 가이드  (0) 2016.11.02
댓글