javascript - Create social media style scroll on long Quarto website page - Stack Overflow

admin管理员组

文章数量:1287774

I have a Quarto website with a long page requiring a lot of scrolling. Websites like social media feeds or news feeds often have a "click to read more" button that the user runs into after scrolling a bit. It then loads a set of content, and you can keep scrolling until you get to the next button or the end of the page content, whichever comes first.

I am not very good with coding (hence my reliance on Quarto), but was able to mimic this behavior in the example below. However, for a page with a lot of content, it is tedious to hard-code each bit of content into the button i.e., to have to separately enter each bit of content (which {{< lipsum >}} is currently standing in for) within each <div class="content-section">{{< lipsum >}}</div>.

Can this "click to read more" button be set up to automatically show a certain length or quantity of content rather than hard-coding each content chunk into the button as with this example below? That seems more powerful and flexible than the current solution.

---
title: "Reprex"
format: html
include-in-header:
  - text: |
      <style>
      .hidden {
        display: none;
      }
      </style>
      <script>
      document.addEventListener('DOMContentLoaded', function() {
        const button = document.getElementById('reveal-more');
        const sections = document.querySelectorAll('.content-section.hidden');
        let currentIndex = 0;

        button.addEventListener('click', function() {
          if (currentIndex < sections.length) {
            sections[currentIndex].classList.remove('hidden');
            currentIndex++;
            if (currentIndex === sections.length) {
              button.style.display = 'none';
            }
          }
        });
      });
      </script>
---

<div id="content-container">
  <div class="content-section">{{< lipsum >}}</div>
  <div class="content-section hidden">{{< lipsum >}}</div>
  <div class="content-section hidden">{{< lipsum >}}</div>
</div>
<button id="reveal-more">Show More</button>

I have a Quarto website with a long page requiring a lot of scrolling. Websites like social media feeds or news feeds often have a "click to read more" button that the user runs into after scrolling a bit. It then loads a set of content, and you can keep scrolling until you get to the next button or the end of the page content, whichever comes first.

I am not very good with coding (hence my reliance on Quarto), but was able to mimic this behavior in the example below. However, for a page with a lot of content, it is tedious to hard-code each bit of content into the button i.e., to have to separately enter each bit of content (which {{< lipsum >}} is currently standing in for) within each <div class="content-section">{{< lipsum >}}</div>.

Can this "click to read more" button be set up to automatically show a certain length or quantity of content rather than hard-coding each content chunk into the button as with this example below? That seems more powerful and flexible than the current solution.

---
title: "Reprex"
format: html
include-in-header:
  - text: |
      <style>
      .hidden {
        display: none;
      }
      </style>
      <script>
      document.addEventListener('DOMContentLoaded', function() {
        const button = document.getElementById('reveal-more');
        const sections = document.querySelectorAll('.content-section.hidden');
        let currentIndex = 0;

        button.addEventListener('click', function() {
          if (currentIndex < sections.length) {
            sections[currentIndex].classList.remove('hidden');
            currentIndex++;
            if (currentIndex === sections.length) {
              button.style.display = 'none';
            }
          }
        });
      });
      </script>
---

<div id="content-container">
  <div class="content-section">{{< lipsum >}}</div>
  <div class="content-section hidden">{{< lipsum >}}</div>
  <div class="content-section hidden">{{< lipsum >}}</div>
</div>
<button id="reveal-more">Show More</button>

• javascript
• html
• infinite-scroll
• quarto
• vertical-scrolling

Share Improve this question Follow edited Feb 23 at 12:03 Mark Rotteveel 109k229229 gold badges156156 silver badges220220 bronze badges asked Feb 22 at 19:13 mvanamanmvanaman 33322 silver badges1313 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default -2

Yes! You can make the "Show More" button automatically reveal a set amount of content instead of manually adding each chunk.

How?

• Store all content in a hidden <div>. Use JavaScript to reveal a
• specific number of paragraphs (or sections) each time the button is
  clicked
• Keep revealing until all content is shown, then hide the button.

本文标签： javascriptCreate social media style scroll on long Quarto website pageStack Overflow