How can I avoid whitespace from displaying below my footer when contracting an accordion at the bottom of my page? - Html

matowens
February 14, 2023
198 views
0 votes
2 Answers

I have a page with a lot of content which requires you to scroll down the page; a typical web page. At the bottom of the page, I have an accordion that contains citation information for the given page. By default, this accordion is collapsed, showing at max 3 lines of content along with a "View All Sources" button. When you click the button, the accordion expands to show all of the content.

When the page loads, and when the accordion is contracted, there is no whitespace below the footer.

In some cases, there are a lot of sources to display within the accordion. In those instances, when the accordion is expanded, you might have to scroll down the page to read them all. When you click the button to contract the accordion, it sucks the content back up. But because there was so much content, it pulls the footer up with it, leaving a bunch of whitespace below the footer. I’d like to prevent that from happening.

I’ve pushed out a demo to Github Pages here:

https://matowens.github.io/footer-whitespace/

Screenshots showing the issue:

Footer prior to expansion

Footer after expansion

Footer after contraction

I’ve tried moving the sources block to the top of the page. When I do this, the issue doesn’t appear. I believe this is because I don’t scroll down below where the footer would get pulled up above when the accordion is contracted. However, for this project, this isn’t a viable solution since the sources block is required to be at the bottom of the page.

I’ve tried adjusting the overflow property on the HTML and Body tags dynamically, as the accordion expands and contracts, in hopes it would refresh the height of the page or the scrollbar to fit the content back within the correct view. This has had no impact, though.

I’ve tried to find others experiencing similar issues, but everything I’ve found talks about whitespace below the footer being caused by tall pages with little content. This is not what’s happening in my instance as there is a lot of content that pushes the footer offscreen and requires you to scroll to it.

I’m at a bit of a loss at what to try next.

Is this a browser bug and is there something I can do to prevent it from triggering?

Stack example below:

/**
 * Source block functionality
 */
(function($) {

  let viewAllLink = $('.viewall-link');
  let viewLessLink = $('.viewless-link');
  let sourceList = $('.sources-block ol');

  if (!viewAllLink.length ||
    !sourceList.length ||
    !viewLessLink.length
  ) {
    return;
  }

  /**
   * Clicking on View All Sources link...
   */
  viewAllLink.click(function() {
    sourceList.css('height', 'unset');
    sourceList.css('overflow', 'visible');
    sourceList.css('-webkit-mask-image', 'none');
    sourceList.css('mask-image', 'none');
    viewAllLink.css('display', 'none');
    viewLessLink.css('display', 'block');
  });

  /**
   * Clicking on the Hide Sources link...
   */
  viewLessLink.click(function() {

    let height = '80px';

    if (window.matchMedia("(max-width: 767px)").matches) {

      if (countSourceLines(sourceList) > 6) {
        height = '144px';
      }
    } else {

      if (countSourceLines(sourceList) > 3) {

      }
    }

    sourceList.css('height', height);
    sourceList.css('overflow', 'visible');
    sourceList.css('-webkit-mask-image', 'linear-gradient(180deg, #000 70%, transparent)');
    sourceList.css('mask-image', 'mask-image: linear-gradient(180deg, #000 70%, transparent);');
    viewAllLink.css('display', 'block');
    viewLessLink.css('display', 'none');
  });

  /**
   * Set initial state of Sources block and if we need to display the View All link or not.
   */

  if (window.matchMedia("(max-width: 767px)").matches) {

    if (countSourceLines(sourceList) > 6) {
      sourceList.css('height', '144px');
      sourceList.css('overflow', 'hidden');
      viewAllLink.css('display', 'block');
    } else {
      sourceList.css('-webkit-mask-image', 'none');
      sourceList.css('mask-image', 'none');
      viewAllLink.css('display', 'none');
    }
  } else {

    console.log(countSourceLines(sourceList));

    if (countSourceLines(sourceList) > 3) {
      sourceList.css('height', '80px');
      sourceList.css('overflow', 'hidden');
      viewAllLink.css('display', 'block');
    } else {
      sourceList.css('-webkit-mask-image', 'none');
      sourceList.css('mask-image', 'none');
      viewAllLink.css('display', 'none');
    }
  }

  /**
   *
   * @param el
   * @returns {number}
   */
  function countSourceLines(el) {
    let olElement = $(el);
    let olHeight = olElement.outerHeight();
    let lineHeight = parseInt(olElement.css("line-height").replace("px", ""));

    return olHeight / lineHeight;
  }
})(jQuery);

html {
  scroll-behavior: smooth !important;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Museo Sans', sans-serif;
  font-size: 18px;
  line-height: 28px;
  font-weight: 300;
  color: #222;
  margin: 0;
  padding: 0;
}

#content-wrap {
  padding: 50px;
}

#footer {
  text-align: center;
  background: #222;
  color: #FFF;
  padding: 50px;
}

.sources-block {
  background: #F0F0F0;
  padding: 8px;
  margin: 48px 0;
}

.sources-block h4 {
  font-weight: 600;
  margin: 0;
  padding: 8px;
}

.sources-block p {
  margin-bottom: 0;
}

.sources-block ol {
  padding-left: 32px;
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent);
  mask-image: linear-gradient(180deg, #000 70%, transparent);
  margin-bottom: 5px;
}

.sources-block li {
  word-break: break-word;
  margin-bottom: 0;
}

.sources-block .viewall-link,
.sources-block .viewless-link {
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  text-align: center;
  color: #298FC2;
  cursor: pointer;
  border-top: 1px solid #298fc2;
  padding: 8px 0 0;
}

.sources-block .viewless-link {
  display: none;
}

.sources-block i {
  padding-left: 5px;
}

<!DOCTYPE html>
<html>
<head>
  <title>Footer Whitespace Demo</title>
</head>
<body>
  <div id="content-wrap">
    <h1>Example Page</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
      tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
      non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
      tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
      non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
      tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
      non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
      tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
      non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
      tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
      non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
      tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
      non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
      tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
      non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
      tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
      non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
      tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
      non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
      tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
      non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
      tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
      non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
      tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
      non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
      tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
      non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
      tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
      non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
      tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
      non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
      tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
      non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
      tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
      non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
      tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
      non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
      tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
      non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
      tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
      non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
      tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
      non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
      tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
      non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
      tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
      non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
      tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
      non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
      tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
      non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
      tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
      non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
      tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
      non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
      tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
      non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
      tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
      non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
      tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
      non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
      tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
      non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
      tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
      non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
      tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
      non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
      tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
      non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
    <div class="sources-block">
      <h4>Sources</h4>
      <ol>
        <li>Source Blah Blah Blah</li>
        <li>Source Blah Blah Blah</li>
        <li>Source Blah Blah Blah</li>
        <li>Source Blah Blah Blah</li>
        <li>Source Blah Blah Blah</li>
        <li>Source Blah Blah Blah</li>
        <li>Source Blah Blah Blah</li>
        <li>Source Blah Blah Blah</li>
        <li>Source Blah Blah Blah</li>
        <li>Source Blah Blah Blah</li>
        <li>Source Blah Blah Blah</li>
        <li>Source Blah Blah Blah</li>
        <li>Source Blah Blah Blah</li>
        <li>Source Blah Blah Blah</li>
        <li>Source Blah Blah Blah</li>
        <li>Source Blah Blah Blah</li>
        <li>Source Blah Blah Blah</li>
        <li>Source Blah Blah Blah</li>
        <li>Source Blah Blah Blah</li>
        <li>Source Blah Blah Blah</li>
        <li>Source Blah Blah Blah</li>
        <li>Source Blah Blah Blah</li>
        <li>Source Blah Blah Blah</li>
        <li>Source Blah Blah Blah</li>
        <li>Source Blah Blah Blah</li>
        <li>Source Blah Blah Blah</li>
        <li>Source Blah Blah Blah</li>
        <li>Source Blah Blah Blah</li>
        <li>Source Blah Blah Blah</li>
      </ol>
      <div class="viewall-link">View All Sources <i class="fa fa-chevron-down"></i></div>
      <div class="viewless-link">Hide Sources <i class="fa fa-chevron-up"></i></div>
    </div>
  </div>
  <div id="footer">
    Footer Here
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</body>
</html>

Answers

I remove most of the CSS then added just enough for the example – I commented where some CSS is purely for visual.

Note I adjusted the HTML just to stack the containers – which is the good parts here grid-template-rows: auto 1fr auto; takes care of that. Those "container" classes are really more "comment" here than used except some visuals.

I removed all the JavaScript (You have jQuery so I left that but that is not really needed here either)

I just toggle the dataset toggle value and the CSS takes care of the rest.
You might even want a "middle" value and this allows for that with a middle height; say 5em or some such just add a button and a value for that and setup the CSS to the height for that value.

(function($) {

  const toggleValues = {
    small: "little",
    large: "big"
  };
  $('.viewall-link')
    .add('.viewless-link')
    .on('click', function(event) {
      let things = $(this).closest('.sources-block').find('.things-list').get(0);
      let collapseValue = things.dataset.toggle;
      things.dataset.toggle = collapseValue == toggleValues.small ? toggleValues.large : toggleValues.small;
    });
})(jQuery);

body {
  margin: 0;
  padding: 0;
}

.parent {
  /* stack the containers */
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.sources-block {
  display: grid;
}

.things-list {
  display: flex;
  flex-direction: column;
}

.things-list[data-toggle="little"] {
  height: 4em;
  overflow: hidden;
}

.things-list[data-toggle="big"] {
  /* just to show it applied - do whatever here */
  background-color: #ddddff44;
}


/* below here is just for "prettier" example */

.parent {
  border: 1px solid lime;
}

.content-container {
  border: solid magenta 1px;
  margin: 0.25rem;
}

.content-parts {
  border: solid cyan 1px;
  display: grid;
  place-items: center;
  margin: 0.25rem;
}

.sources-block {
  background-color: #F0F0F0;
  padding: 0.5rem;
  border: solid 3px red;
  place-items: center;
}

.things-list {
  border: solid blue 1px;
}

.links-container {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.toggle-link {
  border: solid 2px #888888;
  padding: 0.5rem;
  border-radius: 0.5rem;
}

#footer {
  text-align: center;
  background: #222;
  color: #FFF;
  padding: 4rem;
}

<body>
  <div class="parent">
    <div class="content-container">
      <div id="content-wrap" class="content-parts">
        <h1>Example Page</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim.
          Duis tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt
          non, ullamcorper non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim.
          Duis tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt
          non, ullamcorper non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim.
          Duis tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt
          non, ullamcorper non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim.
          Duis tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt
          non, ullamcorper non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim.
          Duis tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt
          non, ullamcorper non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim.
          Duis tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt
          non, ullamcorper non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim.
          Duis tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt
          non, ullamcorper non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim.
          Duis tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt
          non, ullamcorper non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim.
          Duis tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt
          non, ullamcorper non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim.
          Duis tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt
          non, ullamcorper non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim.
          Duis tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt
          non, ullamcorper non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim.
          Duis tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt
          non, ullamcorper non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim.
          Duis tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt
          non, ullamcorper non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim.
          Duis tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt
          non, ullamcorper non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim.
          Duis tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt
          non, ullamcorper non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim.
          Duis tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt
          non, ullamcorper non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim.
          Duis tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt
          non, ullamcorper non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim.
          Duis tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt
          non, ullamcorper non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim.
          Duis tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt
          non, ullamcorper non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim.
          Duis tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt
          non, ullamcorper non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim.
          Duis tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt
          non, ullamcorper non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim.
          Duis tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt
          non, ullamcorper non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim.
          Duis tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt
          non, ullamcorper non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim.
          Duis tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt
          non, ullamcorper non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim.
          Duis tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt
          non, ullamcorper non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim.
          Duis tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt
          non, ullamcorper non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim.
          Duis tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt
          non, ullamcorper non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim.
          Duis tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt
          non, ullamcorper non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim.
          Duis tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt
          non, ullamcorper non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim.
          Duis tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt
          non, ullamcorper non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim.
          Duis tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt
          non, ullamcorper non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim.
          Duis tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt
          non, ullamcorper non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim.
          Duis tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt
          non, ullamcorper non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim.
          Duis tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt
          non, ullamcorper non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
      </div>
    </div>
    <div class="sources-container sources-block">
      <h4>Sources</h4>
      <ol class="things-list" data-toggle="little">
        <li>Source Blah Blah Blah</li>
        <li>Source Blah Blah Blah</li>
        <li>Source Blah Blah Blah</li>
        <li>Source Blah Blah Blah</li>
        <li>Source Blah Blah Blah</li>
        <li>Source Blah Blah Blah</li>
        <li>Source Blah Blah Blah</li>
        <li>Source Blah Blah Blah</li>
        <li>Source Blah Blah Blah</li>
        <li>Source Blah Blah Blah</li>
        <li>Source Blah Blah Blah</li>
        <li>Source Blah Blah Blah</li>
        <li>Source Blah Blah Blah</li>
        <li>Source Blah Blah Blah</li>
        <li>Source Blah Blah Blah</li>
        <li>Source Blah Blah Blah</li>
        <li>Source Blah Blah Blah</li>
        <li>Source Blah Blah Blah</li>
        <li>Source Blah Blah Blah</li>
        <li>Source Blah Blah Blah</li>
        <li>Source Blah Blah Blah</li>
        <li>Source Blah Blah Blah</li>
        <li>Source Blah Blah Blah</li>
        <li>Source Blah Blah Blah</li>
        <li>Source Blah Blah Blah</li>
        <li>Source Blah Blah Blah</li>
        <li>Source Blah Blah Blah</li>
        <li>Source Blah Blah Blah</li>
        <li>Source Blah Blah Blah</li>
      </ol>
      <div class="links-container">
        <div class="toggle-link viewall-link">View All Sources <i class="fa fa-chevron-down"></i></div>
        <div class="toggle-link viewless-link">Hide Sources <i class="fa fa-chevron-up"></i></div>
      </div>
    </div>

    <div id="footer" class="footer-container">
      Footer Here
    </div>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</body>

In the viewLessLink.click() function, you’re actually setting sourceList.css('overflow', 'visible'); on the ol. But because the content is being hidden on click, it should be overflow: hidden. In the click listener, it simply needs to be changed to sourceList.css('overflow', 'hidden');

/**
 * Source block functionality
 */
(function($) {

  let viewAllLink = $('.viewall-link');
  let viewLessLink = $('.viewless-link');
  let sourceList = $('.sources-block ol');

  if (!viewAllLink.length ||
    !sourceList.length ||
    !viewLessLink.length
  ) {
    return;
  }

  /**
   * Clicking on View All Sources link...
   */
  viewAllLink.click(function() {
    sourceList.css('height', 'unset');
    sourceList.css('overflow', 'visible');
    sourceList.css('-webkit-mask-image', 'none');
    sourceList.css('mask-image', 'none');
    viewAllLink.css('display', 'none');
    viewLessLink.css('display', 'block');
  });

  /**
   * Clicking on the Hide Sources link...
   */
  viewLessLink.click(function() {

    let height = '80px';

    if (window.matchMedia("(max-width: 767px)").matches) {

      if (countSourceLines(sourceList) > 6) {
        height = '144px';
      }
    } else {

      if (countSourceLines(sourceList) > 3) {

      }
    }

    sourceList.css('height', height);
    sourceList.css('overflow', 'hidden'); // this is the only value that needed to be updated
    sourceList.css('-webkit-mask-image', 'linear-gradient(180deg, #000 70%, transparent)');
    sourceList.css('mask-image', 'mask-image: linear-gradient(180deg, #000 70%, transparent);');
    viewAllLink.css('display', 'block');
    viewLessLink.css('display', 'none');
  });

  /**
   * Set initial state of Sources block and if we need to display the View All link or not.
   */

  if (window.matchMedia("(max-width: 767px)").matches) {

    if (countSourceLines(sourceList) > 6) {
      sourceList.css('height', '144px');
      sourceList.css('overflow', 'hidden');
      viewAllLink.css('display', 'block');
    } else {
      sourceList.css('-webkit-mask-image', 'none');
      sourceList.css('mask-image', 'none');
      viewAllLink.css('display', 'none');
    }
  } else {

    console.log(countSourceLines(sourceList));

    if (countSourceLines(sourceList) > 3) {
      sourceList.css('height', '80px');
      sourceList.css('overflow', 'hidden');
      viewAllLink.css('display', 'block');
    } else {
      sourceList.css('-webkit-mask-image', 'none');
      sourceList.css('mask-image', 'none');
      viewAllLink.css('display', 'none');
    }
  }

  /**
   *
   * @param el
   * @returns {number}
   */
  function countSourceLines(el) {
    let olElement = $(el);
    let olHeight = olElement.outerHeight();
    let lineHeight = parseInt(olElement.css("line-height").replace("px", ""));

    return olHeight / lineHeight;
  }
})(jQuery);

html {
  scroll-behavior: smooth !important;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Museo Sans', sans-serif;
  font-size: 18px;
  line-height: 28px;
  font-weight: 300;
  color: #222;
  margin: 0;
  padding: 0;
}

#content-wrap {
  padding: 50px;
}

#footer {
  text-align: center;
  background: #222;
  color: #FFF;
  padding: 50px;
}

.sources-block {
  background: #F0F0F0;
  padding: 8px;
  margin: 48px 0;
}

.sources-block h4 {
  font-weight: 600;
  margin: 0;
  padding: 8px;
}

.sources-block p {
  margin-bottom: 0;
}

.sources-block ol {
  padding-left: 32px;
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent);
  mask-image: linear-gradient(180deg, #000 70%, transparent);
  margin-bottom: 5px;
}

.sources-block li {
  word-break: break-word;
  margin-bottom: 0;
}

.sources-block .viewall-link,
.sources-block .viewless-link {
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  text-align: center;
  color: #298FC2;
  cursor: pointer;
  border-top: 1px solid #298fc2;
  padding: 8px 0 0;
}

.sources-block .viewless-link {
  display: none;
}

.sources-block i {
  padding-left: 5px;
}

<!DOCTYPE html>
<html>
<head>
  <title>Footer Whitespace Demo</title>
</head>
<body>
  <div id="content-wrap">
    <h1>Example Page</h1>
   
    
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
      tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
      non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
      tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
      non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
      tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
      non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
      tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
      non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
      tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
      non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
      tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
      non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
      tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
      non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
      tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
      non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
      tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
      non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
      tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
      non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
      tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
      non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
      tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
      non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
    <div class="sources-block">
      <h4>Sources</h4>
      <ol>
        <li>Source Blah Blah Blah</li>
        <li>Source Blah Blah Blah</li>
        <li>Source Blah Blah Blah</li>
        <li>Source Blah Blah Blah</li>
        <li>Source Blah Blah Blah</li>
        <li>Source Blah Blah Blah</li>
        <li>Source Blah Blah Blah</li>
        <li>Source Blah Blah Blah</li>
        <li>Source Blah Blah Blah</li>
        <li>Source Blah Blah Blah</li>
        <li>Source Blah Blah Blah</li>
        <li>Source Blah Blah Blah</li>
        <li>Source Blah Blah Blah</li>
        <li>Source Blah Blah Blah</li>
        <li>Source Blah Blah Blah</li>
        <li>Source Blah Blah Blah</li>
        <li>Source Blah Blah Blah</li>
        <li>Source Blah Blah Blah</li>
        <li>Source Blah Blah Blah</li>
        <li>Source Blah Blah Blah</li>
        <li>Source Blah Blah Blah</li>
        <li>Source Blah Blah Blah</li>
        <li>Source Blah Blah Blah</li>
        <li>Source Blah Blah Blah</li>
        <li>Source Blah Blah Blah</li>
        <li>Source Blah Blah Blah</li>
        <li>Source Blah Blah Blah</li>
        <li>Source Blah Blah Blah</li>
        <li>Source Blah Blah Blah</li>
      </ol>
      <div class="viewall-link">View All Sources <i class="fa fa-chevron-down"></i></div>
      <div class="viewless-link">Hide Sources <i class="fa fa-chevron-up"></i></div>
    </div>
  </div>
  <div id="footer">
    Footer Here
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</body>
</html>

Please signup or login to give your own answer.

Click here to cancel reply.

How can I avoid whitespace from displaying below my footer when contracting an accordion at the bottom of my page? – Html

Answers