Временная шкала с функцией load more - PullRequest
Новая
       1

Временная шкала с функцией load more

0 голосов
/ 17 января 2020

Я создал раздел временной шкалы CSS и HTML, но потому что я новичок ie, чтобы создать для этого js, поэтому я прошу вас помочь мне создать кнопку «Загрузить больше», которая начинает покажи 3 div тогда, когда каждый раз нажимаешь кнопку show 3, это мой главный вопрос. поэтому я покажу вам мой html, который я создал, надеюсь, вы понимаете мой запрос. 

<!--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-->

1 Ответ

1 голос
/ 17 января 2020

Во-первых, у вашего тега временной шкалы внутри div основной-временной шкалы нет закрывающего тега. Поместите закрывающий тег, чтобы скрипт, приведенный ниже, работал.

вставьте этот Jquery cdn в заголовок 

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

second, сначала спрячьте все свои 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 временной шкалы. Кнопка «Загрузить больше» не отображает эти элементы, если она больше, чем.

...