『もっと見る』クリックで、n件の要素を表示させる機能を複数設置したい

Question

実現したいこと

• 『もっと見る』クリックで、n件の要素を表示させる機能を同じページ内に複数設置したい

前提

jQueryを使用せず、Vanilla JSで実装したいと考えています。

発生している問題・エラーメッセージ

『もっと見る』のブロックが一つの時は動作するのですが、
2つ以上になると正しく動作させることができていません。

該当のソースコード

var firstView = 10;
var addItems = 10;
var hidden = 'is-hidden';
var count = document.querySelectorAll('.item__box');
var target = ('.item__box--item');
var targets = document.querySelectorAll(target);
var moreView = document.querySelectorAll('.item__box--more');

if (moreView) {
    document.addEventListener('DOMContentLoaded', () => {
    var targets_length = moreView.previousElementSibling.children.length;
        if (targets_length > firstView) {
            for (var i = firstView; i < targets_length; i++) {
                targets[i].classList.add(hidden);
            }
        }
        else {
            moreView.style.display = 'none';
        }
    });

    moreView.addEventListener('click', () => {
        var hiddens = document.querySelectorAll(target + "." + hidden);
        if (hiddens.length < addItems) {
            addItems = hiddens.length;
        }
        for (var i = 0; i < addItems; i++) {
            hiddens[i].classList.remove(hidden);
        }
        if (document.querySelectorAll(target + "." + hidden).length === 0) {
            moreView.style.display = 'none';
        }
    });
}

<div class="item__box">
    <p class="item__box--title">List01</p>
    <ul class="item__box--list">
        <li class="item__box--item"><a href="#"><img src="/assets/img/img-thumbs01.jpg" alt=""></a></li>
        <li class="item__box--item"><a href="#"><img src="/assets/img/img-thumbs02.jpg" alt=""></a></li>
        <li class="item__box--item"><a href="#"><img src="/assets/img/img-thumbs03.jpg" alt=""></a></li>
        <li class="item__box--item"><a href="#"><img src="/assets/img/img-thumbs04.jpg" alt=""></a></li>
        <li class="item__box--item"><a href="#"><img src="/assets/img/img-thumbs05.jpg" alt=""></a></li>
        <li class="item__box--item"><a href="#"><img src="/assets/img/img-thumbs06.jpg" alt=""></a></li>
        <li class="item__box--item"><a href="#"><img src="/assets/img/img-thumbs07.jpg" alt=""></a></li>
        <li class="item__box--item"><a href="#"><img src="/assets/img/img-thumbs08.jpg" alt=""></a></li>
        <li class="item__box--item"><a href="#"><img src="/assets/img/img-thumbs09.jpg" alt=""></a></li>
        <li class="item__box--item"><a href="#"><img src="/assets/img/img-thumbs10.jpg" alt=""></a></li>
        <li class="item__box--item"><a href="#"><img src="/assets/img/img-thumbs11.jpg" alt=""></a></li>
        <li class="item__box--item"><a href="#"><img src="/assets/img/img-thumbs12.jpg" alt=""></a></li>
        <li class="item__box--item"><a href="#"><img src="/assets/img/img-thumbs13.jpg" alt=""></a></li>
        <li class="item__box--item"><a href="#"><img src="/assets/img/img-thumbs14.jpg" alt=""></a></li>
        <li class="item__box--item"><a href="#"><img src="/assets/img/img-thumbs15.jpg" alt=""></a></li>
        <li class="item__box--item"><a href="#"><img src="/assets/img/img-thumbs16.jpg" alt=""></a></li>
        <li class="item__box--item"><a href="#"><img src="/assets/img/img-thumbs17.jpg" alt=""></a></li>
        <li class="item__box--item"><a href="#"><img src="/assets/img/img-thumbs18.jpg" alt=""></a></li>
        <li class="item__box--item"><a href="#"><img src="/assets/img/img-thumbs19.jpg" alt=""></a></li>
        <li class="item__box--item"><a href="#"><img src="/assets/img/img-thumbs20.jpg" alt=""></a></li>
    </ul>
    <span class="item__box--more">View More</span>
</div>

<div class="item__box">
    <p class="item__box--title">List02</p>
    <ul class="item__box--list">
        <li class="item__box--item"><a href="#"><img src="/assets/img/img-thumbs01.jpg" alt=""></a></li>
        <li class="item__box--item"><a href="#"><img src="/assets/img/img-thumbs02.jpg" alt=""></a></li>
        <li class="item__box--item"><a href="#"><img src="/assets/img/img-thumbs03.jpg" alt=""></a></li>
        <li class="item__box--item"><a href="#"><img src="/assets/img/img-thumbs04.jpg" alt=""></a></li>
        <li class="item__box--item"><a href="#"><img src="/assets/img/img-thumbs05.jpg" alt=""></a></li>
        <li class="item__box--item"><a href="#"><img src="/assets/img/img-thumbs06.jpg" alt=""></a></li>
        <li class="item__box--item"><a href="#"><img src="/assets/img/img-thumbs07.jpg" alt=""></a></li>
        <li class="item__box--item"><a href="#"><img src="/assets/img/img-thumbs08.jpg" alt=""></a></li>
        <li class="item__box--item"><a href="#"><img src="/assets/img/img-thumbs09.jpg" alt=""></a></li>
        <li class="item__box--item"><a href="#"><img src="/assets/img/img-thumbs10.jpg" alt=""></a></li>
        <li class="item__box--item"><a href="#"><img src="/assets/img/img-thumbs11.jpg" alt=""></a></li>
        <li class="item__box--item"><a href="#"><img src="/assets/img/img-thumbs12.jpg" alt=""></a></li>
        <li class="item__box--item"><a href="#"><img src="/assets/img/img-thumbs13.jpg" alt=""></a></li>
        <li class="item__box--item"><a href="#"><img src="/assets/img/img-thumbs14.jpg" alt=""></a></li>
        <li class="item__box--item"><a href="#"><img src="/assets/img/img-thumbs15.jpg" alt=""></a></li>
        <li class="item__box--item"><a href="#"><img src="/assets/img/img-thumbs16.jpg" alt=""></a></li>
        <li class="item__box--item"><a href="#"><img src="/assets/img/img-thumbs17.jpg" alt=""></a></li>
        <li class="item__box--item"><a href="#"><img src="/assets/img/img-thumbs18.jpg" alt=""></a></li>
        <li class="item__box--item"><a href="#"><img src="/assets/img/img-thumbs19.jpg" alt=""></a></li>
        <li class="item__box--item"><a href="#"><img src="/assets/img/img-thumbs20.jpg" alt=""></a></li>
    </ul>
    <span class="item__box--more">View More</span>
</div>

試したこと

まずは『もっと見る』のボックスがひとつの時のものを作り、
2つに増やしたところ、同じ親要素に『.item__box』を持つ『.item__box--item』ではなく、
同じページ内にある『.item__box--item』全てに対して影響を与えてしまったので、
『.item__box--more』に隣接している『.item__box--list』内の
『.item__box--item』を数えるように変更しました。

この状態だと『List01』の方は意図した挙動になったのですが、
『List02』の方が動作しないので、
『.item__box』ごとに処理をループさせたいと考えたのですが、
うまくループさせる方法がわからずに、ソースコードの状態になっています。

Answer 1

こうしてみると、どうでしょう?

document.addEventListener('DOMContentLoaded', () => {

  const firstView = 10;

  document.querySelectorAll('.item__box').forEach(box => {

    const items = box.querySelectorAll('.item__box--item');
    const moreView = box.querySelector('.item__box--more');

    if (items.length <= firstView) {
      moreView.classList.add('is-hidden');
      return;
    }

    [...items].slice(firstView).forEach(item => {
      item.classList.add('is-hidden');
    });

    moreView.addEventListener('click', () => {
      const hiddenItems = box.querySelectorAll('.item__box--item.is-hidden');
      if (hiddenItems.length > 0) {
        hiddenItems.forEach(item => {
          item.classList.remove('is-hidden');
        });
        moreView.textContent = 'View Less';
      } else {
        [...items].slice(firstView).forEach(item => {
          item.classList.add('is-hidden');
        });
        moreView.textContent = 'View More';
      }
    });
  });
});

追記

コメントから

可能であれば、最初にis-hiddenで非表示になったitemを、 任意の数ずつ表示させるようにしたいと考えていました。

とのことでしたので、

任意の数ずつ表示

できるように修正し、あわせて、いくつかまとまった処理を関数化したものを以下に挙げておきますので、使えそうな部分があれば参考にしてください。

HTML への追加

閉じるための <span> を以下のように View More の後に追加します。初期状態は非表示なのでis-hiddenをCSSクラスに入れておきます。

  </ul>
  <span class="item__box--more">View More</span>
+ <span class="item__box--close is-hidden">Close</span>
</div>

javascript 修正案

• 初期表示での件数、View Moreをクリックするごとに追加表示する件数の定数名を FIRST_VIEW と ADD_ITEMS にしました。
• HTML要素の配列を引数にとり、これらの表示、非表示を設定する処理を関数 show と hide にしました。
• .item__box に対する設定を関数 itemBoxSetting にしました。

const FIRST_VIEW = 5;
const ADD_ITEMS = 3;

const hide = (elements) => {
  elements.forEach(elm => {
    elm.classList.add('is-hidden');
  });
};

const show = (elements) => {
  elements.forEach(elm => {
    elm.classList.remove('is-hidden');
  });
};

const itemBoxSetting = (box) => {
  const items = box.querySelectorAll('.item__box--item');
  const moreView = box.querySelector('.item__box--more');
  const closeView = box.querySelector('.item__box--close');

  if (items.length <= FIRST_VIEW) {
    hide([moreView]);
    return;
  }

  hide([...items].slice(FIRST_VIEW));

  moreView.addEventListener('click', () => {
    const hiddenItems = box.querySelectorAll('.item__box--item.is-hidden');
    if (hiddenItems.length > 0) {
      show([...hiddenItems].slice(0, ADD_ITEMS));
      if (hiddenItems.length - ADD_ITEMS <= 0) {
        hide([moreView]);
      }
      show([closeView]);
    }
  });

  closeView.addEventListener('click', () => {
    hide([...items].slice(FIRST_VIEW));
    hide([closeView]);
    show([moreView]);
  });
}

document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('.item__box').forEach(itemBoxSetting);
});

• codepen: https://codepen.io/t4tikk3x/pen/OJaNZEb

Comments

[takatouaya]

ご回答いただきまして、ありがとうございます！
大変勉強になります。

可能であれば、最初にis-hiddenで非表示になったitemを、
任意の数ずつ表示させるようにしたいと考えていました。

例えば『.item__box--item』が30個あった場合、
最初は10件だけ表示しているのですが『View More』ボタンクリックで、
is-hiddenがついている要素を一気に表示させるのではなく、
１０件ずつ表示させるといった形で…

ご提示いただいた内容は、考えていた挙動に近いので、
もう少し考えてみたいと思います！

[退会済みユーザー]

コメントありがとうございます。
> もう少し考えてみたいと思います！
とのことなので、回答に修正案を追記しました。
使えそうな部分があれば参考にしていただければと思います。

[takatouaya]

修正案までいただきまして、ありがとうございます！

追加でいただいた内容も参考にさせていただき、
実装したいと考えていた挙動が実現できました。

[退会済みユーザー]

🎉👏