【JavaScript】li を初期値5つ表示。ボタンがクリックされると残りを表示。

JavaScript プログラミング

こんにちは、ダイキです。
今回は、JavaScript で、li のリストを初期値5つ表示で、クリックされると残りのリストを表示するというものを作成します。
これは言葉に具現化するのが難しかったですね。なので、結構大変でした。

HTMLです。【JavaScript】li を初期値5つ表示。ボタンがクリックされると残りを表示。


<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JavaScript</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <ul id="list">
    <li>メニュー1</li>
    <li>メニュー2</li>
    <li>メニュー3</li>
    <li>メニュー4</li>
    <li>メニュー5</li>
    <li>メニュー6</li>
    <li>メニュー7</li>
    <li>メニュー8</li>
    <li>メニュー9</li>
    <li>メニュー10</li>
    <li>メニュー11</li>
    <li>メニュー12</li>
  </ul>

  <button id="btn">追加</button>

  <script src="script.js"></script>
</body>

</html>

CSSです。【JavaScript】li を初期値5つ表示。ボタンがクリックされると残りを表示。


body {
  margin-top: 10rem;
  text-align: center;
}
ul {
  display: inline-block;
  text-align: left;
}
li {
  list-style: none;
}
li:nth-of-type(n+5) {
  display: none;
}
ul .li-block {
  display: block;
}
button {
  display: block;
  margin: auto;
}

JavaScriptです。【JavaScript】li を初期値5つ表示。ボタンがクリックされると残りを表示。


const btn = document.getElementById('btn');

btn.addEventListener('click', () => {
  const nth = document.querySelectorAll('#list li:nth-of-type(n+5)');
  for (let i = 0; nth.length; i++) {
    nth[i].classList.toggle('li-block');
  }
})