[javascript] 리스트 더보기 기능 구현

리스트 18개가 있는데 처음에 6개 보여주고 더보기 버튼 클릭시 6개씩 더 보여주고 싶다.

그리고 마지막에 리스트가 다 보여지면 더보기 버튼이 사라지게 구현해보자.

 

=> active를 붙여 처음 보여주고 싶은 갯수 만큼 보이고,

=> 더보기 버튼을 누를때마다 해당 active의 item 클래스를 보여준다.

 

HTML

<div class="more-frame">
  <ul class="lineup-box">
    <li data-popup="popup-lineup0" class="popup-link item">
      <div class="img-box">
        <img src="assets/images/sss.png"  />
      </div>
      <div class="txt-box">
        <p>ss</p>
      </div>
    </li>
    <li data-popup="popup-lineup1" class="popup-link item">
      <div class="img-box">
        <img src="assets/images/dd.png" />
      </div>
      <div class="txt-box">
        <p>ddd</p>
      </div>
    </li>
    <li data-popup="popup-lineup2" class="popup-link item">
      <div class="img-box">
        <img src="assets/images/ff.png" />
      </div>
      <div class="txt-box">
        <p>fff</p>
      </div>
    </li>
    <li data-popup="popup-lineup3" class="popup-link item">
      <div class="img-box">
        <img src="assets/images/dd.png"  />
      </div>
      <div class="txt-box">
        <p>dd :<br />tt</p>
      </div>
    </li>
    <li data-popup="popup-lineup4" class="popup-link item">
      <div class="img-box">
        <img src="assets/images/dd.png" />
      </div>
      <div class="txt-box">
        <p>d:<br />ddd</p>
      </div>
    </li>
    <li data-popup="popup-lineup5" class="popup-link item">
      <div class="img-box">
        <img src="assets/images/ww.png" />
      </div>
      <div class="txt-box">
        <p>dS</p>
      </div>
    </li>
    <li data-popup="popup-lineup6" class="popup-link item">
      <div class="img-box">
        <img src="assets/images/zz.png"/>
      </div>
      <div class="txt-box">
        <p>dfsdf fd</p>
      </div>
    </li>
    <li data-popup="popup-lineup7" class="popup-link item">
      <div class="img-box">
        <img src="assets/images/c.png"/>
      </div>
      <div class="txt-box">
        <p>gfdfdf</p>
      </div>
    </li>
    <li data-popup="popup-lineup8" class="popup-link item">
      <div class="img-box">
        <img src="assets/images/uu.png" />
      </div>
      <div class="txt-box">
        <p>fdf</p>
      </div>
    </li>
    <li data-popup="popup-lineup9" class="popup-link item">
      <div class="img-box">
        <img src="assets/images/q.png"  />
      </div>
      <div class="txt-box">
        <p>P</p>
      </div>
    </li>
    <li data-popup="popup-lineup10" class="popup-link item">
      <div class="img-box">
        <img src="assets/images/n.png"  />
      </div>
      <div class="txt-box">
        <p>Sl</p>
      </div>
    </li>
    <li data-popup="popup-lineup11" class="popup-link item">
      <div class="img-box">
        <img src="assets/images/ww.png" />
      </div>
      <div class="txt-box">
        <p>Ry</p>
      </div>
    </li>
    <li data-popup="popup-lineup12" class="popup-link item">
      <div class="img-box">
        <img src="assets/images/r.png"  />
      </div>
      <div class="txt-box">
        <p>s</p>
      </div>
    </li>
    <li data-popup="popup-lineup13" class="popup-link item">
      <div class="img-box">
        <img src="assets/images/d.png"  />
      </div>
      <div class="txt-box">
        <p>t</p>
      </div>
    </li>
    <li data-popup="popup-lineup14" class="popup-link item">
      <div class="img-box">
        <img src="assets/images/yy.png" />
      </div>
      <div class="txt-box">
        <p>yy</p>
      </div>
    </li>
    <li data-popup="popup-lineup15" class="popup-link item">
      <div class="img-box">
        <img src="assets/images/f.png" />
      </div>
      <div class="txt-box">
        <p>ss</p>
      </div>
    </li>
    <li data-popup="popup-lineup16" class="popup-link item">
      <div class="img-box">
        <img src="assets/images/t.png"  />
      </div>
      <div class="txt-box">
        <p> U</p>
      </div>
    </li>
    <li data-popup="popup-lineup17" class="popup-link item">
      <div class="img-box">
        <img src="assets/images/ff.png"  />
      </div>
      <div class="txt-box">
        <p>ss</p>
      </div>
    </li>
    <li data-popup="popup-lineup18" class="popup-link item">
      <div class="img-box">
        <img src="assets/images/yy.png" />
      </div>
      <div class="txt-box">
        <p>yy</p>
      </div>
    </li>

  </ul>

  <button type="button" class="btn-more">
    <img src="assets/images/btn_more.png" alt="더보기" />
  </button>
</div>

SCSS

$mediaPSD-function: remove-unit($mediaPSD);
@function vw($val, $std: $mediaPSD-function) {
  @return ($val / ($std / 100)) * 1vw;
}

#lineup {
  .lineup {
    &-box {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 20px;
      width: 100%;
      @include lg-max {
        overflow: hidden;
        gap: vw(40);
        // height: vw(1330);
      }
      > li {
        position: relative;
        overflow: hidden;
        max-width: calc(100% / 4 - 20px / 4 * 3);
        flex: 0 1 calc(100% / 4 - 20px / 4 * 3);
        border-radius: 10px;
        cursor: pointer;
        @include lg-max {
          max-width: calc(100% / 2 - vw(40) / 2 * 1);
          flex: 0 1 calc(100% / 2 - vw(40) / 2 * 1);
        }
        &.item {
          display: none;
          &.active {
            display: block;
          }
        }
        .img {
          &-box {
            img {
              @include lg-max {
                width: 100%;
              }
            }
          }
        }
        .txt {
          &-box {
            position: absolute;
            left: 50%;
            bottom: 0;
            transform: translateX(-50%);
            width: 100%;
            padding: 22px;
            color: #fff;
            font-size: 24px;
            font-weight: 500;
            text-align: center;
            line-height: 1.1;
            @include lg-max {
              padding: vw(26);
              font-size: vw(36);
            }
          }
        }
      }
    }
  }
  .btn {
    &-more {
      display: block;
      margin: 7vw auto 0;
      width: vw(495);
      height: vw(110);
    }
  }
}

Javascript

// ##### more function
$(document).ready(function () {
  moreFn('.more-frame', '6');
  $('.btn-more').on('click', function () {
    moreFn('.more-frame', '6', '.btn-more');
  });
});
function moreFn(ele, cnt, btn) {
  var moreList = ele + ' .item:not(.active)';
  var listLength = $(moreList).length;
  var listTotalCount;
  if (cnt < listLength) {
    listTotalCount = cnt;
  } else {
    listTotalCount = listLength;
    $(btn).hide();
  }
  $(moreList + ':lt(' + listTotalCount + ')').addClass('active');
}