Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!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>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers