【javascript】ボタンを押してコンテンツを切り替えるシンプルなやり方

タブ切り替えに近いですが、ボタンを押してコンテンツ表示を変えたいことは多いなと思ったので、メモとして残しておきます。
素のjsなので、jqueryやbootstrapが嫌という方はどうぞテンプレとして使ってあげてください。

デモ

See the Pen RmOJzB by reon.negi (@ngron) on CodePen.

コードの中身

# pending-content, #done-content {
  display: none;
}

# pending-button.active, #done-button.active{
  color: blue;
  background-color: orange;
}

# pending-content.active, #done-content.active {
  display: block;
}

let $pending_button = document.getElementById("pending-button");
let $done_button = document.getElementById("done-button");
let $pending_content = document.getElementById("pending-content");
let $done_content = document.getElementById("done-content");

reset_styles = function() {
  $pending_button.classList.remove("active");
  $done_button.classList.remove("active");
  $pending_content.classList.remove("active");
  $done_content.classList.remove("active");
};

$pending_button.addEventListener("click", function() {
  reset_styles();
  if (this.classList.toggle("active")) {
    $pending_content.classList.toggle("active");
  }
})
$done_button.addEventListener("click", function() {
  reset_styles();
  if (this.classList.toggle("active")) {
    $done_content.classList.toggle("active");
  }
});

  // デフォルトで未完了のみ表示
$pending_content.classList.toggle("active");
$pending_button.classList.toggle("active")

toggleを使いたくない場合。

index.html

<button id="done-button">完了</button>
<button id="pending-button">未完了</button>

<div id="done-content">
  <li>完了 1</li>
  <li>完了 2</li>
  <li>完了 3</li>
</div>
<div id="pending-content">
  <li>未完了 1</li>
  <li>未完了 2</li>
  <li>未完了 3</li>
</div>

main.js

let $pending_button = document.getElementById("pending-button");
let $done_button = document.getElementById("done-button");
let $pending_content = document.getElementById("pending-content");
let $done_content = document.getElementById("done-content");

reset_styles = function() {
  $pending_button.style.color = "";
  $done_button.style.color = "";
  $pending_content.style.display = "none";
  $done_content.style.display = "none";
};

change_style = function(button, item) {
  button.style.color = "blue";
  item.style.display = "block";
};

$pending_button.addEventListener("click", function() {
  reset_styles();
  change_style(this, $pending_content);
});

$done_button.addEventListener("click", function() {
  reset_styles();
  change_style(this, $done_content);
});

// デフォルトで未完了のみ表示
change_style($pending_button, $pending_content);