Display several sections of content, in this case unordered lists, but only show X items at a time. Then click a button to expand each content section as desired.
JavaScript
// ***********************************
// Link List - Reduce
// ***********************************
const linkListReduce = () => {
// get all '.link-list' elements
const linkLists = document.querySelectorAll('.link-list')
// iterate over each '.link-list' element
linkLists.forEach((linkList) => {
// get the number of items to display
const dataReduce = linkList.dataset.reduce
// get all list item elements
const listItems = linkList.querySelectorAll('li')
// hide list items that exceed the display limit
listItems.forEach((item, index) => {
if (index >= dataReduce) {
item.classList.add('link-list__hide')
}
})
// get all '.link-list__more' elements
const moreButtons = linkList.querySelectorAll('.link-list__more')
// add click event listener to each '.link-list__more' element
moreButtons.forEach((button) => {
button.addEventListener('click', () => {
// show or hide additional list items depending on their current visibility
listItems.forEach((item, index) => {
if (index >= dataReduce) {
item.classList.toggle('link-list__hide')
}
})
if (button.innerHTML === 'View More') {
button.innerHTML = 'View Less'
} else {
button.innerHTML = 'View More'
}
// smooth scroll to the top of the link-list element, accounting for the fixed header height
const headerHeight = parseInt(getComputedStyle(document.querySelector('.header')).getPropertyValue('--header-height')) * 16 // the '.header' height uses the 'em' unit which doesn't work when we use parseInt, so we must multiply by 16 (1em = 16px)
const linkListTop = linkList.getBoundingClientRect().top + window.pageYOffset - headerHeight - 32 // subtract a little extra so it isn't flush to the top
window.scrollTo({ top: linkListTop, behavior: 'smooth' })
})
})
})
}
linkListReduce()HTML
<section class="content">
<div>
<div class="link-list" data-reduce="3">
<h2>Dinosaur Jr. Videos</h2>
<p>Dinosaur Jr. is an American rock band formed in Amherst, Massachusetts in 1984.</p>
<div class="link-list__content">
<ul>
<li><a href="https://www.youtube.com/watch?v=TEgRdZj7LJQ" target="_blank" rel="noopener">Thumb</a></li>
<li><a href="https://www.youtube.com/watch?v=v5yxVuNDLmo">The Wagon</a></li>
<li><a href="https://www.youtube.com/watch?v=TgTJtdn6VjM" target="_blank" rel="noopener">Over It</a></li>
<li><a href="https://www.youtube.com/watch?v=IQi2l1oy1TA" target="_blank" rel="noopener">Take It Back</a></li>
<li><a href="https://www.youtube.com/watch?v=XelDCDRnboE" target="_blank" rel="noopener">Out There</a></li>
<li><a href="https://www.youtube.com/watch?v=UT7IpRx08tE" target="_blank" rel="noopener">Just Live Heaven</a></li>
<li><a href="https://www.youtube.com/watch?v=5eO6up9Gpv0" target="_blank" rel="noopener">Freak Scene</a></li>
<li><a href="https://www.youtube.com/watch?v=JXkN3nJyWEA" target="_blank" rel="noopener">Feel the Pain</a></li>
</ul>
<button class="link-list__more">View More</button>
</div>
</div>
<div class="link-list" data-reduce="3">
<h2>Built to Spill Videos</h2>
<p>Built to Spill is an American indie rock band that formed in Boise, Idaho, in 1992.</p>
<div class="link-list__content">
<ul>
<li><a href="https://www.youtube.com/watch?v=0hgRgO5y0f4" target="_blank" rel="noopener">Living Zoo</a></li>
<li><a href="https://www.youtube.com/watch?v=LZ1VqwPmKkw" target="_blank" rel="noopener">Never Be The Same</a></li>
<li><a href="https://www.youtube.com/watch?v=mFIBwS0GVX0" target="_blank" rel="noopener">Conventional Wisdom</a></li>
<li><a href="https://www.youtube.com/watch?v=AVtskhcGOtc" target="_blank" rel="noopener">Car</a></li>
<li><a href="https://www.youtube.com/watch?v=JTWH5rq9DGc" target="_blank" rel="noopener">Gonna Lose</a></li>
<li><a href="https://www.youtube.com/watch?v=qsOaFwyu2L0" target="_blank" rel="noopener">Fool's Gold</a></li>
<li><a href="https://www.youtube.com/watch?v=uCpO5x5ziL8" target="_blank" rel="noopener">Mountain Top</a></li>
</ul>
<button class="link-list__more">View More</button>
</div>
</div>
</div>
<div>
<div class="link-list" data-reduce="3">
<h2>Archers of Loaf</h2>
<p>Archers of Loaf is an American indie rock band originally formed in Chapel Hill, North Carolina, in 1991.</p>
<div class="link-list__content">
<ul>
<li><a href="https://www.youtube.com/watch?v=JkXN3Tbz-QM" target="_blank" rel="noopener">Might</a></li>
<li><a href="https://www.youtube.com/watch?v=LTegGRqoh30" target="_blank" rel="noopener">Lowest Part is Free</a></li>
<li><a href="https://www.youtube.com/watch?v=p8heCttqF3E" target="_blank" rel="noopener">Harnessed in Slums</a></li>
<li><a href="https://www.youtube.com/watch?v=kjDwZNs6GLs" target="_blank" rel="noopener">Wrong</a></li>
<li><a href="https://www.youtube.com/watch?v=L521N7oWDGg" target="_blank" rel="noopener">In the Surface Noise</a></li>
<li><a href="https://www.youtube.com/watch?v=4ZkEob55qso" target="_blank" rel="noopener">Web in Front</a></li>
</ul>
<button class="link-list__more">View More</button>
</div>
</div>
<div class="link-list" data-reduce="3">
<h2>Misc. Videos</h2>
<p>Other bands.</p>
<div class="link-list__content">
<ul>
<li><a href="https://www.youtube.com/watch?v=ra0ZDlo_jnE" target="_blank" rel="noopener">Heatmiser - Why Did I Decide to Stay?</a></li>
<li><a href="https://www.youtube.com/watch?v=GSgxKPj7AJ4" target="_blank" rel="noopener">Quasi - Doomscrollers</a></li>
<li><a href="https://www.youtube.com/watch?v=Dk86jqVElVk" target="_blank" rel="noopener">Miracle Legion - Snacks and Candy</a></li>
<li><a href="https://www.youtube.com/watch?v=SFniGEsV3Qs" target="_blank" rel="noopener">Sebadoh - Skull</a></li>
<li><a href="https://www.youtube.com/watch?v=J1sYN0PuRs4" target="_blank" rel="noopener">Husker Du - Makes No Sense At All</a></li>
</ul>
<button class="link-list__more">View More</button>
</div>
</div>
</div>
</div>
</section>CSS
.content {
margin-inline: auto;
padding-inline: 1em;
width: min(1440px, 100%);
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: clamp(1em, 3vw, 3em);
@media (max-width: 1024px) {
grid-template-columns: 1fr;
}
}
.link-list {
text-align: center;
}
.link-list__content {
padding: 2em;
background-color: #efefef;
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
border-bottom: 1px solid #fff;
padding: 0.35em;
}
a {
color: #ce2724;
text-decoration: none;
&:hover,
&:focus {
text-decoration: underline;
}
}
}
.link-list__hide {
display: none;
}
.link-list__more {
background-color: #BFBFBF;
border: none;
border-radius: 2em;
color: #626262;
cursor: pointer;
display: block;
margin-inline: auto;
margin-top: 2em;
padding-block: 0.5em;
padding-inline: 2em;
position: relative;
text-align: center;
text-decoration: none;
text-transform: none;
transition: all 0.3s;
width: fit-content;
&:hover,
&:focus {
background-color: #ce2724;
color: #fff;
}
}