Develop Reference

How to get true content height of DOM element that is being cropped by overflow: hidden (for smooth css transition to height: auto)?

Solution:
Thanks to #Kalimah, this works in composition api & script setup:
<script setup>
const state = reactive({
meetCardHeight: 100
})
const element = ref(null)
const changeElementHeight = () => {
if (state.meetCardHeight !== element.value.scrollHeight) {
state.meetCardHeight = element.value.scrollHeight
} else {
state.meetCardHeight = 100
}
}
</script>
<template>
<div ref="element" class="w-6/12 p-4 mx-auto rounded border border-slate-400 bg-slate-50 shadow cursor-pointer hover:border-slate-600 hover:shadow-md transition mb-4 overflow-hidden transition-all duration-500" :style="{ height: state.meetCardHeight + 'px'}" #click="changeElementHeight">
<h1>Hello World</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci architecto at atque beatae commodi cumque delectus dolor doloremque enim est et eum ex facere id illum incidunt, ipsum iusto labore laboriosam libero magnam minima molestias nobis nulla officia perspiciatis placeat porro possimus quo sequi tempore tenetur velit voluptatibus? Adipisci amet asperiores, autem explicabo fuga fugiat, id illum nobis obcaecati quam quasi, quibusdam tempora voluptatem? Adipisci aliquam at dignissimos dolore doloribus eaque itaque minus nam possimus quae quia temporibus vel, vero!</p>
</div>
</template>
It will expand the div to its height-auto size with a smooth transition.
Original Question:
I'm trying to compute the true height of all text in this component, despite part of it being hidden by overflow: hidden (tailwind):
<script setup>
const state = reactive({
meetCardHeight: 100
})
</script>
<template>
<div ref="element" class="w-6/12 p-4 mx-auto rounded border border-slate-400 bg-slate-50 shadow cursor-pointer hover:border-slate-600 hover:shadow-md transition mb-4 overflow-hidden transition-all duration-500" :style="{ height: state.meetCardHeight + 'px'}">
<h1>Hello World</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci architecto at atque beatae commodi cumque delectus dolor doloremque enim est et eum ex facere id illum incidunt, ipsum iusto labore laboriosam libero magnam minima molestias nobis nulla officia perspiciatis placeat porro possimus quo sequi tempore tenetur velit voluptatibus? Adipisci amet asperiores, autem explicabo fuga fugiat, id illum nobis obcaecati quam quasi, quibusdam tempora voluptatem? Adipisci aliquam at dignissimos dolore doloribus eaque itaque minus nam possimus quae quia temporibus vel, vero!</p>
</div>
</template>
The current component height is set to 100px for the overflow property to take effect. Is there a way to determine the height that h1 and p tags would result in, if overflow would not be present?

You can find the height with scrollHieght property. It is a native JS property and is independet of vue or any other libraries.
Example:
console.log("Full Height", document.querySelector(".container").scrollHeight + "px");
.container{
height: 100px;
overflow: hidden;
}
<div class="container">
<h1>Hello World</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci architecto at atque beatae commodi cumque delectus dolor doloremque enim est et eum ex facere id illum incidunt, ipsum iusto labore laboriosam libero magnam minima molestias nobis nulla officia perspiciatis placeat porro possimus quo sequi tempore tenetur velit voluptatibus? Adipisci amet asperiores, autem explicabo fuga fugiat, id illum nobis obcaecati quam quasi, quibusdam tempora voluptatem? Adipisci aliquam at dignissimos dolore doloribus eaque itaque minus nam possimus quae quia temporibus vel, vero!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci architecto at atque beatae commodi cumque delectus dolor doloremque enim est et eum ex facere id illum incidunt, ipsum iusto labore laboriosam libero magnam minima molestias nobis nulla officia perspiciatis placeat porro possimus quo sequi tempore tenetur velit voluptatibus? Adipisci amet asperiores, autem explicabo fuga fugiat, id illum nobis obcaecati quam quasi, quibusdam tempora voluptatem? Adipisci aliquam at dignissimos dolore doloribus eaque itaque minus nam possimus quae quia temporibus vel, vero!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci architecto at atque beatae commodi cumque delectus dolor doloremque enim est et eum ex facere id illum incidunt, ipsum iusto labore laboriosam libero magnam minima molestias nobis nulla officia perspiciatis placeat porro possimus quo sequi tempore tenetur velit voluptatibus? Adipisci amet asperiores, autem explicabo fuga fugiat, id illum nobis obcaecati quam quasi, quibusdam tempora voluptatem? Adipisci aliquam at dignissimos dolore doloribus eaque itaque minus nam possimus quae quia temporibus vel, vero!</p>
</div>

How to scroll and follow active state on links on a fixed height scrollable sidebar?

I am working on a blog layout which have its content on the left side and a 'table of contents' sidebar on the right. The sidebar is fixed with a full viewport height but scrollable incase the items inside are too many.
It is also worth noting that the active state changes on the links in the sidebar based on their corresponding content in the viewport. What I mean to say is that whenever a blog post is in the viewport, its link gets active state in the sidebar. And it is done by Intersection Observer API.
Now the core functionality works fine except there is one issue.
When there are a lot of blog posts, there will be a lot of links on the sidebar. So naturally the bottom links are not visible on the sidebar as they are at the bottom and can't be seen until the scrollbar is pulled down. Therefore, the active state is not visible as well.
Suppose a user tries to read blog post Text 8, the corresponding Text 8 link should've been visible on the sidebar but it is not. Only upto Text 7 is visible in the demo (based on my viewport).
What I wanted to achieve is how can I move the scrollbar up and down based on which blog posts the user is reading? I mean if the user is reading Text 8 then the sidebar will scroll downward and show Text 8 link. If he is reading Text 9, it will scroll to Text 9 link. Now if he decides to read Text 7 from Text 9 then the scrollbar will move upward two places and display Text 7 link.
I don't know if I could explain it properly but this is the best I could write.
It would be a great help if you could help me with this.
Here's the codepen.
Here's the snippet:
const asideContent = $('#aside-content .aside-content');
const asideContentItem = $('#aside-content a');
const callback = (entries, observer) => {
$(entries).each((idx, item) => {
const navItem = $('#' + item.target.id);
if (item.isIntersecting) {
$(asideContentItem).each((i, eachLink) => {
if ($(eachLink).attr("href") === ('#' + $(navItem).attr('id'))) {
$(eachLink).addClass('active');
} else {
$(eachLink).removeClass('active');
}
})
}
})
};
const options = {
threshold: 0.2
};
const observer = new IntersectionObserver(callback, options);
const container = $('#main');
const targetElements = $('.main-content .inner-container');
$(targetElements).each((idx, item) => {
observer.observe(item);
});
.header-content {
background-color: blue;
height: 800px;
margin: 20px 0;
}
#main {
margin: 20px auto;
}
.main-content {
background-color: cyan;
}
#aside-content {
position: sticky;
top: 0;
align-self: flex-start;
background-color: red;
height: 100vh;
overflow-y: auto;
}
#aside-content a {
display: block;
margin: 40px auto;
text-decoration: none;
}
#aside-content a.active {
background-color: rgba(0, 255, 0, 0.5);
}
.aside-fixed {
position: fixed;
top: 0;
right: 0;
}
footer {
background-color: brown;
height: 200px;
}
<link href="https://stackpath.bootstrapcdn.com/bootswatch/4.5.2/litera/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Test</a>
</nav>
<section class="container">
<div class="row">
<div class="col-md-12">
<div class="header-content">
<h3>header content</h3>
</div>
</div>
</div>
</section>
<section class="container" id="main">
<div class="row">
<div class="col-8">
<div class="main-content">
<div id="text1" class="inner-container">
<h2>Text 1</h2>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet provident recusandae, omnis laborum ad, pariatur debitis hic velit magni, expedita dicta vel nemo asperiores aperiam quia soluta esse consequuntur! Praesentium voluptate delectus, consequatur
dolore veniam vitae sint error ea, facere nisi reprehenderit.
</div>
<div id="text2" class="inner-container">
<h2>Text 2</h2>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet provident recusandae, omnis laborum ad, pariatur debitis hic velit magni, expedita dicta vel nemo asperiores aperiam quia soluta esse consequuntur! Praesentium voluptate delectus, consequatur
dolore veniam vitae sint error ea, facere nisi reprehenderit harumti aspernatur delectus mollitia libero similique assumenda quos sequi eligendi?
</div>
<div id="text3" class="inner-container">
<h2>Text 3</h2>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet provident recusandae, omnis laborum ad, pariatur debitis hic velit magni, expedita dicta vel nemo asperiores aperiam quia soluta esse consequuntur! Praesentium voluptate delectus, consequatur
dolore veniam vitae sint error ea, facere nisi reprehenderit harum doloremque asperiores repudiandae eligendi, maxime repellat aperiam labore exercitationem enim possimus. Suscipit facilis debitis quidem excepturi?
</div>
<div id="text4" class="inner-container">
<h2>Text 4</h2>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet provident recusandae, omnis laborum ad, pariatur debitis hic velit magni, expedita dicta vel nemo asperiores aperiam quia soluta esse consequuntur! Praesentium voluptate delectus, consequatur
dolore veniam vitae sint error ea, facere nisi reprehenderit harum doloremque asperiores repudiandae eligendi.
</div>
<div id="text5" class="inner-container">
<h2>Text 5</h2>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet provident recusandae, omnis laborum ad, pariatur debitis hic velit magni, expedita dicta vel nemo asperiores aperiam quia soluta esse consequuntur! Praesentium voluptate delectus, consequatur
dolore veniam vitae sint error ea, facere nisi reprehenderit harum doloremque asperiores repudiandae eligendi.
</div>
<div id="text6" class="inner-container">
<h2>Text 6</h2>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet provident recusandae, omnis laborum ad, pariatur debitis hic velit magni, expedita dicta vel nemo asperiores aperiam quia soluta esse consequuntur! Praesentium voluptate delectus, consequatur
dolore veniam vitae sint error ea, facere nisi reprehenderit harum doloremque asperiores repudiandae eligendi.
</div>
<div id="text7" class="inner-container">
<h2>Text 7</h2>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet provident recusandae, omnis laborum ad, pariatur debitis hic velit magni, expedita dicta vel nemo asperiores aperiam quia soluta esse consequuntur! Praesentium voluptate delectus, consequatur
dolore veniam vitae sint error ea, facere nisi reprehenderit harum doloremque asperiores repudiandae eligendi.
</div>
<div id="text8" class="inner-container">
<h2>Text 8</h2>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet provident recusandae, omnis laborum ad, pariatur debitis hic velit magni, expedita dicta vel nemo asperiores aperiam quia soluta esse consequuntur! Praesentium voluptate delectus, consequatur
dolore veniam vitae sint error ea, facere nisi reprehenderit harum doloremque asperiores repudiandae eligendi.
</div>
<div id="text9" class="inner-container">
<h2>Text 9</h2>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet provident recusandae, omnis laborum ad, pariatur debitis hic velit magni, expedita dicta vel nemo asperiores aperiam quia soluta esse consequuntur! Praesentium voluptate delectus, consequatur
dolore veniam vitae sint error ea, facere nisi reprehenderit harum doloremque asperiores repudiandae eligendi.
</div>
</div>
</div>
<div class="col-4" id="aside-content">
<div class="aside-content">
<h3>Table of Contents</h3>
<div>
Text 1
Text 2
Text 3
Text 4
Text 5
Text 6
Text 7
Text 8
Text 9
</div>
</div>
</div>
</section>
<footer>
<h3>footer</h3>
</footer>

You can solve this by setting the scrollbar position to the specific offset as the active class changes. This could be achieved by editing your JS and adding the scrolling logic to the add addClass('active') section.
Basically you have to update the scrollbar position as the active class is added to any link.
document.querySelector("#aside-content").scrollTo(0,position)
And the position to which the scrollbar has to be set, can be fetched from the current active element's/link's offset.
document.querySelector("#aside-content > div > div > a.active").offsetTop
Therefore just after adding class the above stated steps can be done
$(eachLink).addClass('active');
var position = document.querySelector("#aside-content > div > div > a.active").offsetTop;
document.querySelector("#aside-content").scrollTo(0,position);
But, the above code will always set the position, and due to which at first link will set the scrolling to itself and not let "table of contents" text to be visible ever. To fix this situation, updating logic can be made conditional by checking if the active element is first child of the scrolling div.
So, the overall working code should be as follow:
const asideContent = $('#aside-content .aside-content');
const asideContentItem = $('#aside-content a');
const callback = (entries, observer) => {
$(entries).each((idx, item) => {
const navItem = $('#' + item.target.id);
if (item.isIntersecting) {
$(asideContentItem).each((i, eachLink) => {
if ($(eachLink).attr("href") === ('#' + $(navItem).attr('id'))) {
$(eachLink).addClass('active');
if (document.querySelector("#aside-content > div > div > a.active").parentNode.firstElementChild != document.querySelector("#aside-content > div > div > a.active")) {
document.querySelector("#aside-content").scrollTo(0, document.querySelector("#aside-content > div > div > a.active").offsetTop);
} else {
document.querySelector("#aside-content").scrollTo(0, 0);
}
} else {
$(eachLink).removeClass('active');
}
})
}
})
};
const options = {
threshold: 0.2
};
const observer = new IntersectionObserver(callback, options);
const container = $('#main');
const targetElements = $('.main-content .inner-container');
$(targetElements).each((idx, item) => {
observer.observe(item);
});
.header-content {
background-color: blue;
height: 800px;
margin: 20px 0;
}
#main {
margin: 20px auto;
}
.main-content {
background-color: cyan;
}
#aside-content {
position: sticky;
top: 0;
align-self: flex-start;
background-color: red;
height: 100vh;
overflow-y: auto;
}
#aside-content a {
display: block;
margin: 40px auto;
text-decoration: none;
}
#aside-content a.active {
background-color: rgba(0, 255, 0, 0.5);
}
.aside-fixed {
position: fixed;
top: 0;
right: 0;
}
footer {
background-color: brown;
height: 200px;
}
<link href="https://stackpath.bootstrapcdn.com/bootswatch/4.5.2/litera/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Test</a>
</nav>
<section class="container">
<div class="row">
<div class="col-md-12">
<div class="header-content">
<h3>header content</h3>
</div>
</div>
</div>
</section>
<section class="container" id="main">
<div class="row">
<div class="col-8">
<div class="main-content">
<div id="text1" class="inner-container">
<h2>Text 1</h2>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet provident recusandae, omnis laborum ad, pariatur debitis hic velit magni, expedita dicta vel nemo asperiores aperiam quia soluta esse consequuntur! Praesentium voluptate delectus, consequatur
dolore veniam vitae sint error ea, facere nisi reprehenderit.
</div>
<div id="text2" class="inner-container">
<h2>Text 2</h2>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet provident recusandae, omnis laborum ad, pariatur debitis hic velit magni, expedita dicta vel nemo asperiores aperiam quia soluta esse consequuntur! Praesentium voluptate delectus, consequatur
dolore veniam vitae sint error ea, facere nisi reprehenderit harumti aspernatur delectus mollitia libero similique assumenda quos sequi eligendi?
</div>
<div id="text3" class="inner-container">
<h2>Text 3</h2>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet provident recusandae, omnis laborum ad, pariatur debitis hic velit magni, expedita dicta vel nemo asperiores aperiam quia soluta esse consequuntur! Praesentium voluptate delectus, consequatur
dolore veniam vitae sint error ea, facere nisi reprehenderit harum doloremque asperiores repudiandae eligendi, maxime repellat aperiam labore exercitationem enim possimus. Suscipit facilis debitis quidem excepturi?
</div>
<div id="text4" class="inner-container">
<h2>Text 4</h2>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet provident recusandae, omnis laborum ad, pariatur debitis hic velit magni, expedita dicta vel nemo asperiores aperiam quia soluta esse consequuntur! Praesentium voluptate delectus, consequatur
dolore veniam vitae sint error ea, facere nisi reprehenderit harum doloremque asperiores repudiandae eligendi.
</div>
<div id="text5" class="inner-container">
<h2>Text 5</h2>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet provident recusandae, omnis laborum ad, pariatur debitis hic velit magni, expedita dicta vel nemo asperiores aperiam quia soluta esse consequuntur! Praesentium voluptate delectus, consequatur
dolore veniam vitae sint error ea, facere nisi reprehenderit harum doloremque asperiores repudiandae eligendi.
</div>
<div id="text6" class="inner-container">
<h2>Text 6</h2>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet provident recusandae, omnis laborum ad, pariatur debitis hic velit magni, expedita dicta vel nemo asperiores aperiam quia soluta esse consequuntur! Praesentium voluptate delectus, consequatur
dolore veniam vitae sint error ea, facere nisi reprehenderit harum doloremque asperiores repudiandae eligendi.
</div>
<div id="text7" class="inner-container">
<h2>Text 7</h2>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet provident recusandae, omnis laborum ad, pariatur debitis hic velit magni, expedita dicta vel nemo asperiores aperiam quia soluta esse consequuntur! Praesentium voluptate delectus, consequatur
dolore veniam vitae sint error ea, facere nisi reprehenderit harum doloremque asperiores repudiandae eligendi.
</div>
<div id="text8" class="inner-container">
<h2>Text 8</h2>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet provident recusandae, omnis laborum ad, pariatur debitis hic velit magni, expedita dicta vel nemo asperiores aperiam quia soluta esse consequuntur! Praesentium voluptate delectus, consequatur
dolore veniam vitae sint error ea, facere nisi reprehenderit harum doloremque asperiores repudiandae eligendi.
</div>
<div id="text9" class="inner-container">
<h2>Text 9</h2>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet provident recusandae, omnis laborum ad, pariatur debitis hic velit magni, expedita dicta vel nemo asperiores aperiam quia soluta esse consequuntur! Praesentium voluptate delectus, consequatur
dolore veniam vitae sint error ea, facere nisi reprehenderit harum doloremque asperiores repudiandae eligendi.
</div>
</div>
</div>
<div class="col-4" id="aside-content">
<div class="aside-content">
<h3>Table of Contents</h3>
<div>
Text 1
Text 2
Text 3
Text 4
Text 5
Text 6
Text 7
Text 8
Text 9
</div>
</div>
</div>
</section>
<footer>
<h3>footer</h3>
</footer>

bootstrap js transition on collapse

I was searching for a toggle collapse button and I've been leaded to this link:
https://getbootstrap.com/docs/4.0/components/collapse/
I've found what I was looking for, but the only problem is the transition; once I click on the button it shows my div immediately . I want it to expand slower with transition.
Here's my code:
.innerdiv{
display: block;
width: 33%;
padding: 50px;
margin-left: 2px;
text-align: center;
background-color: #2bb88d;
margin-top: 20px;
border-radius: 20px;
height: 350px;
overflow:auto ;
float: left;
clear: right;
transition: 15s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styletest.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</head>
<body>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> more adresses </button>
<div class="collapse" id="collapseExample">
<div class="innerdiv"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis est soluta aliquam necessitatibus quia tempora corrupti hic fuga! Perspiciatis iste vero ipsum maxime, saepe vitae dolores amet iure assumenda cum.</p></div>
<div class="innerdiv">Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit explicabo, expedita voluptate nemo commodi architecto qui libero aliquam nisi corrupti quam, dignissimos odit hic neque aperiam, repudiandae ex soluta. Iste assumenda nostrum culpa architecto fugit id laborum quidem expedita perferendis aliquam placeat distinctio, ad magni ipsam tenetur est nesciunt non pariatur esse veritatis dolores dolorem unde quos ducimus? Beatae quam, corporis hic autem quisquam quae magni totam vitae labore sapiente error ab quo animi consequuntur veniam tempore facere. Facilis, minima quo neque a quas numquam magni, laborum dignissimos accusamus ipsa facere fuga. Quam voluptate sit quas illo sequi, sed nam vero repellendus, ipsum, officia quibusdam quos consectetur voluptas dignissimos obcaecati ad non natus hic recusandae quae numquam ex. Aspernatur esse unde, expedita nisi amet laborum blanditiis accusamus corrupti ea vel! Exercitationem vel, quidem in sed dolorem ullam odit sit nisi earum nesciunt unde eaque cum labore, quam id quibusdam ab.</div>
<div class="innerdiv">Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit explicabo, expedita voluptate nemo commodi architecto qui libero aliquam nisi corrupti quam, dignissimos odit hic neque aperiam, repudiandae ex soluta. Iste assumenda nostrum culpa architecto fugit id laborum quidem expedita perferendis aliquam placeat distinctio, ad magni ipsam tenetur est nesciunt non pariatur esse veritatis dolores dolorem unde quos ducimus? Beatae quam, corporis hic autem quisquam quae magni totam vitae labore sapiente error ab quo animi consequuntur veniam tempore facere. Facilis, minima quo neque a quas numquam magni, laborum dignissimos accusamus ipsa facere fuga. Quam voluptate sit quas illo sequi, sed nam vero repellendus, ipsum, officia quibusdam quos consectetur voluptas dignissimos obcaecati ad non natus hic recusandae quae numquam ex. Aspernatur esse unde, expedita nisi amet laborum blanditiis accusamus corrupti ea vel! Exercitationem vel, quidem in sed dolorem ullam odit sit nisi earum nesciunt unde eaque cum labore, quam id quibusdam ab.</div>
</div>
</body>
</html>

At the time of collapsing, there runs a default bootstrap class named collapsing. You've to override that class like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</head>
<style>
.innerdiv {
display: block;
width: 33%;
padding: 50px;
margin-left: 2px;
text-align: center;
background-color: #2bb88d;
margin-top: 20px;
border-radius: 20px;
height: 350px;
overflow: auto;
float: left;
clear: right;
}
.collapsing {
transition: 15s;
}
</style>
<body>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> more adresses </button>
<div class="collapse" id="collapseExample">
<div class="innerdiv">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis est soluta aliquam necessitatibus quia tempora corrupti hic fuga! Perspiciatis iste vero ipsum maxime, saepe vitae dolores amet iure assumenda cum.</p>
</div>
<div class="innerdiv">Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit explicabo, expedita voluptate nemo commodi architecto qui libero aliquam nisi corrupti quam, dignissimos odit hic neque aperiam, repudiandae ex soluta. Iste assumenda nostrum culpa
architecto fugit id laborum quidem expedita perferendis aliquam placeat distinctio, ad magni ipsam tenetur est nesciunt non pariatur esse veritatis dolores dolorem unde quos ducimus? Beatae quam, corporis hic autem quisquam quae magni totam
vitae labore sapiente error ab quo animi consequuntur veniam tempore facere. Facilis, minima quo neque a quas numquam magni, laborum dignissimos accusamus ipsa facere fuga. Quam voluptate sit quas illo sequi, sed nam vero repellendus, ipsum,
officia quibusdam quos consectetur voluptas dignissimos obcaecati ad non natus hic recusandae quae numquam ex. Aspernatur esse unde, expedita nisi amet laborum blanditiis accusamus corrupti ea vel! Exercitationem vel, quidem in sed dolorem
ullam odit sit nisi earum nesciunt unde eaque cum labore, quam id quibusdam ab.</div>
<div class="innerdiv">Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit explicabo, expedita voluptate nemo commodi architecto qui libero aliquam nisi corrupti quam, dignissimos odit hic neque aperiam, repudiandae ex soluta. Iste assumenda nostrum culpa
architecto fugit id laborum quidem expedita perferendis aliquam placeat distinctio, ad magni ipsam tenetur est nesciunt non pariatur esse veritatis dolores dolorem unde quos ducimus? Beatae quam, corporis hic autem quisquam quae magni totam
vitae labore sapiente error ab quo animi consequuntur veniam tempore facere. Facilis, minima quo neque a quas numquam magni, laborum dignissimos accusamus ipsa facere fuga. Quam voluptate sit quas illo sequi, sed nam vero repellendus, ipsum,
officia quibusdam quos consectetur voluptas dignissimos obcaecati ad non natus hic recusandae quae numquam ex. Aspernatur esse unde, expedita nisi amet laborum blanditiis accusamus corrupti ea vel! Exercitationem vel, quidem in sed dolorem
ullam odit sit nisi earum nesciunt unde eaque cum labore, quam id quibusdam ab.</div>
</div>
</body>
</html>

Javascript Accordion - collapse other sections when one selected

I have the following vanilla Javacscript accordion working well. I am now trying to adapt my toggle function so that the sections other than the one selected in the accordion collapse. This is what I have so far - you will see that the sections remain open unless they are clicked to be closed:
https://codepen.io/mikehdesign/pen/KmeZgG
HTML
<div class="accordion">
<h4 class="accordion-header">Accordion 1</h4>
<div class="accordion-content">
<p>Cras malesuada ultrices augue molestie risus.</p>
</div>
<h4 class="accordion-header">Accordion 2</h4>
<div class="accordion-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae at placeat nesciunt nostrum accusamus debitis fuga similique quisquam, rerum temporibus, quod asperiores nulla, eveniet libero earum eaque harum inventore minima ipsum saepe omnis. Officia, est, maiores. Reprehenderit odio perspiciatis voluptates commodi ex at praesentium laborum deleniti libero, architecto sit optio repellat est molestiae beatae, magnam qui voluptatibus. Ducimus mollitia dignissimos minus sapiente quidem, animi adipisci laboriosam aliquam asperiores facere. Repellat recusandae doloribus incidunt voluptatibus quibusdam rem delectus inventore nisi, laudantium. Doloribus eum vero, consequuntur nisi enim quam non odio dignissimos praesentium nostrum magnam consequatur totam reprehenderit quaerat. Saepe, blanditiis fugit?</p>
</div>
<h4 class="accordion-header">Accordion 3</h4>
<div class="accordion-content">
<p>Vivamus facilisisnibh scelerisque laoreet.</p>
</div>
</div>
<div class="accordion">
<h4 class="accordion-header">Accordion 1</h4>
<div class="accordion-content">
<p>Cras malesuada ultrices augue molestie risus.</p>
</div>
<h4 class="accordion-header">Accordion 2</h4>
<div class="accordion-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae at placeat nesciunt nostrum accusamus debitis fuga similique quisquam, rerum temporibus, quod asperiores nulla, eveniet libero earum eaque harum inventore minima ipsum saepe omnis. Officia, est, maiores. Reprehenderit odio perspiciatis voluptates commodi ex at praesentium laborum deleniti libero, architecto sit optio repellat est molestiae beatae, magnam qui voluptatibus. Ducimus mollitia dignissimos minus sapiente quidem, animi adipisci laboriosam aliquam asperiores facere. Repellat recusandae doloribus incidunt voluptatibus quibusdam rem delectus inventore nisi, laudantium. Doloribus eum vero, consequuntur nisi enim quam non odio dignissimos praesentium nostrum magnam consequatur totam reprehenderit quaerat. Saepe, blanditiis fugit?</p>
</div>
<h4 class="accordion-header">Accordion 3</h4>
<div class="accordion-content">
<p>Vivamus facilisisnibh scelerisque laoreet.</p>
</div>
</div>
JAVASCRIPT
document.addEventListener('DOMContentLoaded', function() {
function toggle() {
if (this.nextElementSibling.classList.contains('active')) {
this.nextElementSibling.removeAttribute('style');
} else {
var elementHeight = this.nextElementSibling.scrollHeight;
this.nextElementSibling.style.maxHeight = elementHeight + 'px';
}
// Toggle `active` class
this.nextElementSibling.classList.toggle('active');
this.classList.toggle('active');
}
var accordion = document.querySelectorAll('div.accordion .accordion-header');
for (var i = 0, len = accordion.length; i < len; i++) {
accordion[i].addEventListener('click', toggle);
}
});
SCSS
div.accordion {
.accordion-header {
cursor: pointer;
&.active {
}
}
.accordion-content {
max-height: 0px;
overflow: hidden;
transition: max-height 400ms;
&.active {
overflow: auto;
}
}
}
Any help with this would be greatly appreciated - I am not using jQuery for this project.

We can collapse all sections firstly before open the clicked one.
just add this loop at the first of toggle function:
var x = document.getElementsByClassName('active');
var i;
for (i = 0; i < x.length; i++) {
if( x[i]==this ){ break; }
x[i].nextElementSibling.removeAttribute('style');
x[i].nextElementSibling.classList.toggle('active');
x[i].classList.toggle('active');
}
Updated CodePEN
div.accordion .accordion-header {
cursor: pointer;
}
div.accordion .accordion-content {
max-height: 0px;
overflow: hidden;
-webkit-transition: max-height 400ms;
transition: max-height 400ms;
}
div.accordion .accordion-content.active {
overflow: auto;
}
<div class="accordion">
<h4 class="accordion-header">Accordion 1</h4>
<div class="accordion-content">
<p>Cras malesuada ultrices augue molestie risus.</p>
</div>
<h4 class="accordion-header">Accordion 2</h4>
<div class="accordion-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae at placeat nesciunt nostrum accusamus debitis fuga similique quisquam, rerum temporibus, quod asperiores nulla, eveniet libero earum eaque harum inventore minima ipsum saepe omnis. Officia, est, maiores. Reprehenderit odio perspiciatis voluptates commodi ex at praesentium laborum deleniti libero, architecto sit optio repellat est molestiae beatae, magnam qui voluptatibus. Ducimus mollitia dignissimos minus sapiente quidem, animi adipisci laboriosam aliquam asperiores facere. Repellat recusandae doloribus incidunt voluptatibus quibusdam rem delectus inventore nisi, laudantium. Doloribus eum vero, consequuntur nisi enim quam non odio dignissimos praesentium nostrum magnam consequatur totam reprehenderit quaerat. Saepe, blanditiis fugit?</p>
</div>
<h4 class="accordion-header">Accordion 3</h4>
<div class="accordion-content">
<p>Vivamus facilisisnibh scelerisque laoreet.</p>
</div>
</div>
<div class="accordion">
<h4 class="accordion-header">Accordion 1</h4>
<div class="accordion-content">
<p>Cras malesuada ultrices augue molestie risus.</p>
</div>
<h4 class="accordion-header">Accordion 2</h4>
<div class="accordion-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae at placeat nesciunt nostrum accusamus debitis fuga similique quisquam, rerum temporibus, quod asperiores nulla, eveniet libero earum eaque harum inventore minima ipsum saepe omnis. Officia, est, maiores. Reprehenderit odio perspiciatis voluptates commodi ex at praesentium laborum deleniti libero, architecto sit optio repellat est molestiae beatae, magnam qui voluptatibus. Ducimus mollitia dignissimos minus sapiente quidem, animi adipisci laboriosam aliquam asperiores facere. Repellat recusandae doloribus incidunt voluptatibus quibusdam rem delectus inventore nisi, laudantium. Doloribus eum vero, consequuntur nisi enim quam non odio dignissimos praesentium nostrum magnam consequatur totam reprehenderit quaerat. Saepe, blanditiis fugit?</p>
</div>
<h4 class="accordion-header">Accordion 3</h4>
<div class="accordion-content">
<p>Vivamus facilisisnibh scelerisque laoreet.</p>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
function toggle() {
var x = document.getElementsByClassName('active');
var i;
for (i = 0; i < x.length; i++) {
if( x[i]==this ){ break; }
x[i].nextElementSibling.removeAttribute('style');
x[i].nextElementSibling.classList.toggle('active');
x[i].classList.toggle('active');
}
if (this.nextElementSibling.classList.contains('active')) {
this.nextElementSibling.removeAttribute('style');
} else {
var elementHeight = this.nextElementSibling.scrollHeight;
this.nextElementSibling.style.maxHeight = elementHeight + 'px';
}
// Toggle `active` class
this.nextElementSibling.classList.toggle('active');
this.classList.toggle('active');
}
var accordion = document.querySelectorAll('div.accordion .accordion-header');
for (var i = 0, len = accordion.length; i < len; i++) {
accordion[i].addEventListener('click', toggle);
}
});
</script>

give alert after load lazy

I'm using lazySizes jquery plugin and I want to have alert when my lazy loaded how can I do for my all loaded content ? I want to do this for my ajax content if I have alert I guess I can handle what I want to do
body {
padding: 30px;
width: 80%;
margin: 0 auto;
}
.teaser.lazyload {
opacity: 0;
transform: scale(0.8);
}
.teaser.lazyloaded {
opacity: 1;
transform: scale(1);
transition: all 700ms;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="teaser lazyload" data-expand="-120">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum eum velit cumque, sint perspiciatis, ea nam illo repellat labore voluptates, vero inventore dolor fuga ipsum vel quas? Debitis, laborum eveniet?</p>
<h1>Teaser Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel excepturi saepe obcaecati repellat natus at enim fugit sapiente qui et corporis laudantium totam adipisci nihil, cumque rem reprehenderit aspernatur nostrum sunt voluptates tempora pariatur
ea! Commodi quo minima similique quaerat velit vitae esse beatae quos illo dolores? Saepe quam, sed praesentium ut, vel quaerat, cupiditate laudantium expedita quisquam aperiam voluptatem quae illo cumque odit molestiae iure beatae odio? Omnis velit
minima aspernatur qui voluptatum sapiente laudantium explicabo reiciendis architecto quaerat adipisci aliquam magni, reprehenderit iure fugit ex voluptas provident accusamus optio nostrum nemo sed soluta. Numquam quia, veniam molestias? Accusantium.</p>
</div>
<div class="teaser lazyload" data-expand="-120">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum eum velit cumque, sint perspiciatis, ea nam illo repellat labore voluptates, vero inventore dolor fuga ipsum vel quas? Debitis, laborum eveniet?</p>
<h1>Teaser Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel excepturi saepe obcaecati repellat natus at enim fugit sapiente qui et corporis laudantium totam adipisci nihil, cumque rem reprehenderit aspernatur nostrum sunt voluptates tempora pariatur
ea! Commodi quo minima similique quaerat velit vitae esse beatae quos illo dolores? Saepe quam, sed praesentium ut, vel quaerat, cupiditate laudantium expedita quisquam aperiam voluptatem quae illo cumque odit molestiae iure beatae odio? Omnis velit
minima aspernatur qui voluptatum sapiente laudantium explicabo reiciendis architecto quaerat adipisci aliquam magni, reprehenderit iure fugit ex voluptas provident accusamus optio nostrum nemo sed soluta. Numquam quia, veniam molestias? Accusantium.</p>
</div>
<div class="teaser lazyload" data-expand="-120">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum eum velit cumque, sint perspiciatis, ea nam illo repellat labore voluptates, vero inventore dolor fuga ipsum vel quas? Debitis, laborum eveniet?</p>
<h1>Teaser Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel excepturi saepe obcaecati repellat natus at enim fugit sapiente qui et corporis laudantium totam adipisci nihil, cumque rem reprehenderit aspernatur nostrum sunt voluptates tempora pariatur
ea! Commodi quo minima similique quaerat velit vitae esse beatae quos illo dolores? Saepe quam, sed praesentium ut, vel quaerat, cupiditate laudantium expedita quisquam aperiam voluptatem quae illo cumque odit molestiae iure beatae odio? Omnis velit
minima aspernatur qui voluptatum sapiente laudantium explicabo reiciendis architecto quaerat adipisci aliquam magni, reprehenderit iure fugit ex voluptas provident accusamus optio nostrum nemo sed soluta. Numquam quia, veniam molestias? Accusantium.</p>
</div>
<div class="teaser lazyload" data-expand="-220">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum eum velit cumque, sint perspiciatis, ea nam illo repellat labore voluptates, vero inventore dolor fuga ipsum vel quas? Debitis, laborum eveniet?</p>
<h1>Teaser Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel excepturi saepe obcaecati repellat natus at enim fugit sapiente qui et corporis laudantium totam adipisci nihil, cumque rem reprehenderit aspernatur nostrum sunt voluptates tempora pariatur
ea! Commodi quo minima similique quaerat velit vitae esse beatae quos illo dolores? Saepe quam, sed praesentium ut, vel quaerat, cupiditate laudantium expedita quisquam aperiam voluptatem quae illo cumque odit molestiae iure beatae odio? Omnis velit
minima aspernatur qui voluptatum sapiente laudantium explicabo reiciendis architecto quaerat adipisci aliquam magni, reprehenderit iure fugit ex voluptas provident accusamus optio nostrum nemo sed soluta. Numquam quia, veniam molestias? Accusantium.</p>
</div>
<div class="teaser lazyload" data-expand="-220">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum eum velit cumque, sint perspiciatis, ea nam illo repellat labore voluptates, vero inventore dolor fuga ipsum vel quas? Debitis, laborum eveniet?</p>
<h1>Teaser Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel excepturi saepe obcaecati repellat natus at enim fugit sapiente qui et corporis laudantium totam adipisci nihil, cumque rem reprehenderit aspernatur nostrum sunt voluptates tempora pariatur
ea! Commodi quo minima similique quaerat velit vitae esse beatae quos illo dolores? Saepe quam, sed praesentium ut, vel quaerat, cupiditate laudantium expedita quisquam aperiam voluptatem quae illo cumque odit molestiae iure beatae odio? Omnis velit
minima aspernatur qui voluptatum sapiente laudantium explicabo reiciendis architecto quaerat adipisci aliquam magni, reprehenderit iure fugit ex voluptas provident accusamus optio nostrum nemo sed soluta. Numquam quia, veniam molestias? Accusantium.</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/2.0.7/lazysizes.min.js"></script>
click to see codepen

The plugin does not document this very well, but there are several events being fired by it, namely lazybeforeunveil, lazybeforesizes and lazyunveilread. I'm not sure about their exact order, but you can bind to lazyunveilread in order to achieve what you want:
$('.teaser.lazyload').on('lazyunveilread', function(ev) {
alert("foo!");
console.log(ev.target); // <-- that's how you can get the element that has been loaded
});
#import "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css";
body{
padding:30px;
width:80%;
margin:0 auto;
}
.teaser.lazyload {
opacity: 0;
transform: scale(0.8);
}
.teaser.lazyloaded {
opacity: 1;
transform: scale(1);
transition: all 700ms;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/2.0.7/lazysizes.min.js"></script>
<div class="teaser lazyload" data-expand="-120">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum eum velit cumque, sint perspiciatis, ea nam illo repellat labore voluptates, vero inventore dolor fuga ipsum vel quas? Debitis, laborum eveniet?</p>
<h1>Teaser Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel excepturi saepe obcaecati repellat natus at enim fugit sapiente qui et corporis laudantium totam adipisci nihil, cumque rem reprehenderit aspernatur nostrum sunt voluptates tempora pariatur ea! Commodi quo minima similique quaerat velit vitae esse beatae quos illo dolores? Saepe quam, sed praesentium ut, vel quaerat, cupiditate laudantium expedita quisquam aperiam voluptatem quae illo cumque odit molestiae iure beatae odio? Omnis velit minima aspernatur qui voluptatum sapiente laudantium explicabo reiciendis architecto quaerat adipisci aliquam magni, reprehenderit iure fugit ex voluptas provident accusamus optio nostrum nemo sed soluta. Numquam quia, veniam molestias? Accusantium.</p>
</div>
<div class="teaser lazyload" data-expand="-120">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum eum velit cumque, sint perspiciatis, ea nam illo repellat labore voluptates, vero inventore dolor fuga ipsum vel quas? Debitis, laborum eveniet?</p>
<h1>Teaser Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel excepturi saepe obcaecati repellat natus at enim fugit sapiente qui et corporis laudantium totam adipisci nihil, cumque rem reprehenderit aspernatur nostrum sunt voluptates tempora pariatur ea! Commodi quo minima similique quaerat velit vitae esse beatae quos illo dolores? Saepe quam, sed praesentium ut, vel quaerat, cupiditate laudantium expedita quisquam aperiam voluptatem quae illo cumque odit molestiae iure beatae odio? Omnis velit minima aspernatur qui voluptatum sapiente laudantium explicabo reiciendis architecto quaerat adipisci aliquam magni, reprehenderit iure fugit ex voluptas provident accusamus optio nostrum nemo sed soluta. Numquam quia, veniam molestias? Accusantium.</p>
</div>
<div class="teaser lazyload" data-expand="-120">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum eum velit cumque, sint perspiciatis, ea nam illo repellat labore voluptates, vero inventore dolor fuga ipsum vel quas? Debitis, laborum eveniet?</p>
<h1>Teaser Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel excepturi saepe obcaecati repellat natus at enim fugit sapiente qui et corporis laudantium totam adipisci nihil, cumque rem reprehenderit aspernatur nostrum sunt voluptates tempora pariatur ea! Commodi quo minima similique quaerat velit vitae esse beatae quos illo dolores? Saepe quam, sed praesentium ut, vel quaerat, cupiditate laudantium expedita quisquam aperiam voluptatem quae illo cumque odit molestiae iure beatae odio? Omnis velit minima aspernatur qui voluptatum sapiente laudantium explicabo reiciendis architecto quaerat adipisci aliquam magni, reprehenderit iure fugit ex voluptas provident accusamus optio nostrum nemo sed soluta. Numquam quia, veniam molestias? Accusantium.</p>
</div>
<div class="teaser lazyload" data-expand="-220">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum eum velit cumque, sint perspiciatis, ea nam illo repellat labore voluptates, vero inventore dolor fuga ipsum vel quas? Debitis, laborum eveniet?</p>
<h1>Teaser Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel excepturi saepe obcaecati repellat natus at enim fugit sapiente qui et corporis laudantium totam adipisci nihil, cumque rem reprehenderit aspernatur nostrum sunt voluptates tempora pariatur ea! Commodi quo minima similique quaerat velit vitae esse beatae quos illo dolores? Saepe quam, sed praesentium ut, vel quaerat, cupiditate laudantium expedita quisquam aperiam voluptatem quae illo cumque odit molestiae iure beatae odio? Omnis velit minima aspernatur qui voluptatum sapiente laudantium explicabo reiciendis architecto quaerat adipisci aliquam magni, reprehenderit iure fugit ex voluptas provident accusamus optio nostrum nemo sed soluta. Numquam quia, veniam molestias? Accusantium.</p>
</div>
<div class="teaser lazyload" data-expand="-220">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum eum velit cumque, sint perspiciatis, ea nam illo repellat labore voluptates, vero inventore dolor fuga ipsum vel quas? Debitis, laborum eveniet?</p>
<h1>Teaser Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel excepturi saepe obcaecati repellat natus at enim fugit sapiente qui et corporis laudantium totam adipisci nihil, cumque rem reprehenderit aspernatur nostrum sunt voluptates tempora pariatur ea! Commodi quo minima similique quaerat velit vitae esse beatae quos illo dolores? Saepe quam, sed praesentium ut, vel quaerat, cupiditate laudantium expedita quisquam aperiam voluptatem quae illo cumque odit molestiae iure beatae odio? Omnis velit minima aspernatur qui voluptatum sapiente laudantium explicabo reiciendis architecto quaerat adipisci aliquam magni, reprehenderit iure fugit ex voluptas provident accusamus optio nostrum nemo sed soluta. Numquam quia, veniam molestias? Accusantium.</p>
</div>

Lazysizes doesnt have any explicit event handler to know when the lazyload is done. you don't need it too.
In general all you need is lazybeforeunveil to modify the transformation or load to be informed when the image is loaded.
In some specific circumstances you could use setImmediate/setTimeout inside a lazybeforeunveil.
$(document).on('lazybeforeunveil', function(){
//do your stuff.. (setTimeout if required)
});
It is quite consistent. hope it helps

I think you can use jQuery "scroll()" to check if the page is scrolled fully down since as far as I know lazyloading works when we scroll the page so you need to capture that you are at the bottom of the page to show an alert.
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
alert("Bottom Of the Page");
}
});