본문 바로가기
귀펀치토끼는 부서지지 않는다.
주소(D)
영웅은 공부 따원 안 한다네/HTML CSS

[HTML] 티스토리 show hidden

//윈도우
<div class="app-search">
    <button id="search-close" aria-label="Close"></button>
    <button id="search-cancel">취소</button>
</div>


//시스템트레이 이미지
<img id="search-show" src='./images/search_cool.png'>
.app-search {
  position: fixed;
  z-index: 900;
  bottom: -500px;
  right: 10px;
  width: 300px;
  box-shadow: var(--border-window-outer), var(--border-window-inner);
  background: var(--surface);
  padding: 4px;
  margin: 0 auto 0 auto;
  font-size: 13px;
}

.show {
  bottom: 50px !important;
  right: 10px !important;
}
let appSearch = document.querySelector(".app-search");
let searchClose = document.querySelector("#search-close");
let searchCancel = document.querySelector("#search-cancel");
let searchShow = document.querySelector("#search-show");

searchClose.addEventListener("click", ()=>{
  appSearch.classList.remove("show");
});

searchCancel.addEventListener("click", ()=>{
  appSearch.classList.remove("show");
});

searchShow.addEventListener("click", ()=>{
  appSearch.classList.add("show");
});
완료
내 컴퓨터