📚 Course Lesson List Accordion
This is a Javascript code that can be used on any site with a Business or Commerce subscription plan.
With this code, the lesson excerpt will be hidden until you can click on the lesson title to reveal it!
How to use this code
This code is designed to work on the list of lessons inside a course; ideally the grid layout. Copy this code using the copy button on the right.
It’s recommended that you add it to your site wide footer code injection.
You’ll find this under Pages → Custom Code → Code Injection → Footer
<script>
document.querySelectorAll('.course-list__grid-course-item-lesson-name').forEach(title => {
title.addEventListener('click', function(e) {
e.preventDefault();
const excerpt = this.closest('a').querySelector('.course-list__grid-course-item-lesson-excerpt');
excerpt.style.display = excerpt.style.display === 'none' ? 'block' : 'none';
});
});
// Optional: Hide all excerpts on page load
document.querySelectorAll('.couarse-list__grid-course-item-lesson-excerpt').forEach(excerpt => {
excerpt.style.display = 'none';
});
</script>