Dai

【JavaScript】サイドバー開閉操作

クラス名を変更してサイドバー開閉を操作するコード

CSS

/* オーブン状態 */
.side-open {
  width: 200px;
  overflow: scroll;
}

/* クローズ状態 */
.side-close {
  width: 0px;
  overflow: hidden;
}

JavaScript

引数で受け取ったHTML要素のクラス名をside-openに変更する

// サイドバーを開く
function open(element){
  element.className="side-open";
}


引数で受け取ったHTML要素のクラス名をside-closeに変更する

// サイドバー閉じる
function close(element) {
  element.className="side-close";
}


// サイドバー開閉操作
function change(){
  const btn = document.getElementById("btn");
     let bool = false;
     btn.addEventListener("click", () => {
        const side = document.getElementById("side-open");
        if (bool) {
          // オーブンするメソッドを呼び出す
          open(side);
          bool = false;
        } else {
          // クローズするメソッドを呼び出す
          close(side);
          bool = true;
        }
   });
}