时间戳

首页 > 解决方案 > Timeline with load more function

javascript - Timeline with load more function

问题描述

I have created a CSS and HTML timeline section, but because i am so newbie to create js for this, so i asking you to help me to create load more button, which start to show 3 div then when every time click the button show 3, this is my main question. so i will show you my html which i created, hope you understand my request.

<!--Timeline Section Start-->
<section class='timeline pt-100 pb-100' data-scroll-index='2'>
  <div class='container'>
    <div class='row'>
      <div class='col'>
        <div class='section-title'>
          <div class='main-title'>
            <h4>My <span>Experience</span></h4>
            <h6>My Recent Experiences</h6>
          </div>

        </div>
      </div>
    </div>
    <div class='row'>
      <div class='main-timeline'>
        <div class='timeline'>
          <div class='timeline-icon'/>
          <div class='timeline-content'>
            <span class='date'>Apr 2016 - Mar 2017</span>
            <h5 class='title'>Any Title here</h5>
            <p class='description'>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis felis vitae risus pulvinar tincidunt. Nam ac venenatis enim. Aenean hendrerit justo sed.
            </p>
          </div>
        </div>

        <div class='timeline'>
          <div class='timeline-icon'/>
          <div class='timeline-content'>
            <span class='date'>Apr 2016 - Mar 2017</span>
            <h5 class='title'>Any Title here</h5>
            <p class='description'>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis felis vitae risus pulvinar tincidunt. Nam ac venenatis enim. Aenean hendrerit justo sed.
            </p>
          </div>
        </div>

        <div class='timeline'>
          <div class='timeline-icon'/>
          <div class='timeline-content'>
            <span class='date'>Apr 2016 - Mar 2017</span>
            <h5 class='title'>Any Title here</h5>
            <p class='description'>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis felis vitae risus pulvinar tincidunt. Nam ac venenatis enim. Aenean hendrerit justo sed.
            </p>
          </div>
        </div>

        <div class='timeline'>
          <div class='timeline-icon'/>
          <div class='timeline-content'>
            <span class='date'>Apr 2016 - Mar 2017</span>
            <h5 class='title'>Any Title here</h5>
            <p class='description'>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis felis vitae risus pulvinar tincidunt. Nam ac venenatis enim. Aenean hendrerit justo sed.
            </p>
          </div>
        </div>

        <div class='timeline'>
          <div class='timeline-icon'/>
          <div class='timeline-content'>
            <span class='date'>Apr 2016 - Mar 2017</span>
            <h5 class='title'>Any Title here</h5>
            <p class='description'>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis felis vitae risus pulvinar tincidunt. Nam ac venenatis enim. Aenean hendrerit justo sed.
            </p>
          </div>
        </div>

        <div class='timeline'>
          <div class='timeline-icon'/>
          <div class='timeline-content'>
            <span class='date'>Apr 2017 - Present</span>
            <h5 class='title'>Any Title here</h5>
            <p class='description'>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis felis vitae risus pulvinar tincidunt. Nam ac venenatis enim. Aenean hendrerit justo sed.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<!--Timeline Section End-->

标签： javascriptjquerytoggle

解决方案

首先，主时间线 div 中的时间线标签没有结束标签。放置一个结束标签以使以下脚本正常工作。

将此 Jquery cdn 粘贴到您的标题中

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

其次，首先隐藏所有在主时间线类中具有时间线类的 div，所以

<style type="text/css">
      .main-timeline > .timeline {
        display: none;
      }
</style>

最后是将此脚本粘贴到您的身体标签

$(document).ready(function() {
        var display_timeline = 3
        $('.main-timeline > .timeline').eq(display_timeline).css('display', 'block'); // show the first 3 timeline tag.

        $('#load-btn').click(function() { // add one timeline tag every click of load button, you can change it to 3
            display_timeline =  display_timeline + 1
            $('.main-timeline > .timeline').eq(display_timeline).css('display', 'block'); 
        });
 });

注意：display_timeline 变量不得大于您的时间线 div 长度。如果大于，加载更多按钮将不会显示这些元素。

推荐阅读