Develop Reference

Use browser same page jump link functionality with offset

I want to use the same browser URL hash functionality but with offset based on the height of the sticky header. Currently, content goes behind header.
Here is the link to jsfiddle: https://jsfiddle.net/rmyafjt7/13/
The Javascript solution I tried but not working:
const targetJumplinkWrapName = e.target.getAttribute("href").split("#")[1]; // returns destination element id name
const element = document.getElementById(targetJumplinkWrapName);
const elementTop = element.offsetTop + window.innerHeight - 250;
window.scrollTo({ top: elementTop, behavior: 'smooth' });

I believe the brute-force solution is adding a "scroll-margin-top" to the "jumplink-wrap" class such as:
.jumplink-wrap{scroll-margin-top:60px;}
where 60px is the header height in the jsfiddle given.

you can use the :target pseudo element
* {
margin: 0
}
header {
width: 100%;
height: 60px;
color: #fff;
border-bottom: 2px solid #000;
position: fixed;
text-align: center;
background: green
}
.nav {
padding-top: 70px
}
.jumplink-wrap:target::before {
content: "";
display: block;
/* Your header height */
height: 60px;
margin: -60px 0 0;
}
<header>HEADER</header>
<nav class="nav" id="jumpNav">
<ul>
<li class="" data-id="introduction">Introduction</li>
<li data-id="aut_ducimus" class="active">Aut ducimus</li>
<li data-id="sit_inventore_debitis" class="">Sit inventore debitis</li>
<li data-id="et_corrupti" class="">Et corrupti</li>
</ul>
</nav>
<div class="article-content">
<div class="jumplink-wrap" id="introduction"></div>
<p>Lorem ipsum dolor sit amet. Id dicta consequatur qui ipsum cupiditate qui numquam doloribus et possimus obcaecati hic maiores natus ex molestiae labore est repudiandae totam? Aut quasi itaque qui earum expedita ab quos adipisci qui dolores enim sit velit quibusdam. Ex molestiae recusandae et distinctio blanditiis aut laudantium Quis.</p>
<p>Vel facere iure aut voluptatum adipisci sit rerum repudiandae qui vitae nihil rem numquam nulla cum eveniet aperiam et voluptate culpa. Eum voluptate voluptates qui ipsam eius ut nobis facere id quia porro eum explicabo pariatur in nobis sint. Sit culpa pariatur ut aliquid aliquid ut maiores ipsum est pariatur totam et alias laudantium.</p>
<p>Non corporis voluptatibus et numquam aspernatur qui repellat quae qui sequi voluptatem. At magni sequi ut expedita odit et officia doloribus ut repudiandae accusantium sed ipsa quam 33 doloribus unde!</p>
<div class="jumplink-wrap" id="aut_ducimus">
<h2>Aut ducimus</h2>
</div>
<p>Lorem ipsum dolor sit amet. In sint quos vel cupiditate nemo At unde quasi. Non minima molestiae sit dolorem nostrum eum odit nihil vel nobis tempore sit voluptatibus dolorem. Non accusantium voluptate qui error iste ut pariatur repudiandae At molestias obcaecati aut ipsa debitis. Sit ipsam dicta est ipsa iste et minus voluptatibus et autem saepe et repudiandae nostrum.</p>
<p>A porro quibusdam ut eaque blanditiis et esse voluptates. Sed harum vitae et quia iste id laudantium minus et possimus dolorum ut officia neque eos recusandae atque est perferendis expedita? Eum nesciunt omnis id voluptatem excepturi qui quasi libero eos eligendi omnis et numquam aperiam ut illum inventore est debitis voluptas. Et sint quia aut esse temporibus hic voluptas dolores est voluptatem delectus At omnis fugiat eum nihil doloribus.</p>
<p>Sit quis distinctio ut rerum libero et asperiores repellendus vel accusantium voluptatibus quo culpa magnam eum voluptatem nihil est possimus iusto. Et natus quos eum molestiae officiis non minus dolorem est sint ducimus. Eum mollitia dolorem ut deserunt natus ea unde nihil.</p>
<div class="jumplink-wrap" id="sit_inventore_debitis">
<h2>Sit inventore debitis</h2>
</div>
<p>Lorem ipsum dolor sit amet. Et voluptatem nobis vel deleniti distinctio et placeat consequuntur qui aliquid quisquam ex quia vitae. Sed cumque nostrum in velit necessitatibus vel quia quod ut magni optio est quam aperiam non omnis illum.</p>
<p>Id illum vitae a facere soluta ut fugiat nostrum. Non sunt dolor ut soluta nihil est placeat repellendus ab amet animi sit dolorem temporibus! Est voluptatem itaque eos eveniet deleniti qui voluptas facilis et voluptatem doloremque et magnam amet est sequi quod.</p>
<div class="jumplink-wrap" id="et_corrupti">
<h2>Et corrupti</h2>
</div>
<p>Lorem ipsum dolor sit amet. Id nihil repellendus sit dolor excepturi quo aspernatur voluptates eum repellat voluptate. Est obcaecati veritatis ut explicabo veritatis ut delectus quia ad accusamus dolore ut optio consequatur et rerum tenetur qui quibusdam eligendi.</p>
<p>Rem recusandae aliquid est deserunt Quis aut unde nihil ea aliquam quisquam vel tempora quibusdam et autem nemo. At magnam consequatur et reiciendis eligendi sit exercitationem voluptate ut dolorem harum est doloremque repellendus cum beatae rerum. Et provident sint sed beatae molestiae eos quas distinctio. Est voluptates commodi vel voluptatibus praesentium est sint saepe id quae amet et illum quam qui cupiditate voluptatibus.</p>
<p>Aut numquam officia et doloremque praesentium et dolorum molestiae in illo nulla sed quos reprehenderit est fuga dolorem sed quaerat blanditiis. Et voluptates consequatur sed cumque deserunt vel asperiores nulla est ducimus tempora id quia sapiente ex repudiandae voluptatem 33 quaerat molestias.</p>
<p>Non ipsam reiciendis non nulla aliquam est voluptate veniam qui dolor blanditiis? Ea internos distinctio vel eligendi veniam sit assumenda nesciunt eum eius quos cum aperiam autem eum quibusdam eius.</p>
<p>In fuga quia a praesentium accusamus sit dolores consectetur. Est nobis nostrum ut vitae labore aut odio voluptatibus sit laboriosam expedita aut voluptas voluptatibus aut quia saepe ut recusandae unde.</p>
<p>Vel soluta rerum At rerum maxime aut aperiam neque aut enim voluptatibus qui laborum delectus ea sunt repellendus. Et quia voluptatibus eum reprehenderit molestias vel amet sunt. Et quisquam ullam eum illum nisi in aliquid recusandae et quam corrupti. Aut architecto dolor sit iure consequatur in nihil saepe ut consequatur consequatur.</p>

working perfectly, write a script for you. please have a look
const links = document.querySelectorAll('#jumpNav a')
for (const element of links) {
element.addEventListener('click', smoothScroll);
}
function smoothScroll(e) {
e.preventDefault();
const hash = e.target.hash;
const headerHeight = document.querySelector('header').offsetHeight;;
const elementOffset = document.querySelector(`${hash}`).offsetTop;
const hashOffsetTop = (elementOffset - headerHeight);
window.scrollTo({ top: hashOffsetTop, behavior: 'smooth' });
}
* {
margin: 0
}
header {
width: 100%;
height: 60px;
color: #fff;
border-bottom: 2px solid #000;
position: fixed;
text-align: center;
background: green
}
.nav {
padding-top: 70px
}
<header>HEADER</header>
<nav class="nav" id="jumpNav">
<ul>
<li class="" data-id="introduction">Introduction</li>
<li data-id="aut_ducimus" class="active">Aut ducimus</li>
<li data-id="sit_inventore_debitis" class="">Sit inventore debitis</li>
<li data-id="et_corrupti" class="">Et corrupti</li>
</ul>
</nav>
<div class="article-content">
<div class="jumplink-wrap" id="introduction"></div>
<p>Lorem ipsum dolor sit amet. Id dicta consequatur qui ipsum cupiditate qui numquam doloribus et possimus
obcaecati hic maiores natus ex molestiae labore est repudiandae totam? Aut quasi itaque qui earum expedita
ab quos adipisci qui dolores enim sit velit quibusdam. Ex molestiae recusandae et distinctio blanditiis aut
laudantium Quis.</p>
<p>Vel facere iure aut voluptatum adipisci sit rerum repudiandae qui vitae nihil rem numquam nulla cum eveniet
aperiam et voluptate culpa. Eum voluptate voluptates qui ipsam eius ut nobis facere id quia porro eum
explicabo pariatur in nobis sint. Sit culpa pariatur ut aliquid aliquid ut maiores ipsum est pariatur totam
et alias laudantium.</p>
<p>Non corporis voluptatibus et numquam aspernatur qui repellat quae qui sequi voluptatem. At magni sequi ut
expedita odit et officia doloribus ut repudiandae accusantium sed ipsa quam 33 doloribus unde!</p>
<p>Lorem ipsum dolor sit amet. Id dicta consequatur qui ipsum cupiditate qui numquam doloribus et possimus
obcaecati hic maiores natus ex molestiae labore est repudiandae totam? Aut quasi itaque qui earum expedita
ab quos adipisci qui dolores enim sit velit quibusdam. Ex molestiae recusandae et distinctio blanditiis aut
laudantium Quis.</p>
<p>Vel facere iure aut voluptatum adipisci sit rerum repudiandae qui vitae nihil rem numquam nulla cum eveniet
aperiam et voluptate culpa. Eum voluptate voluptates qui ipsam eius ut nobis facere id quia porro eum
explicabo pariatur in nobis sint. Sit culpa pariatur ut aliquid aliquid ut maiores ipsum est pariatur totam
et alias laudantium.</p>
<p>Non corporis voluptatibus et numquam aspernatur qui repellat quae qui sequi voluptatem. At magni sequi ut
expedita odit et officia doloribus ut repudiandae accusantium sed ipsa quam 33 doloribus unde!</p>
<p>Lorem ipsum dolor sit amet. Id dicta consequatur qui ipsum cupiditate qui numquam doloribus et possimus
obcaecati hic maiores natus ex molestiae labore est repudiandae totam? Aut quasi itaque qui earum expedita
ab quos adipisci qui dolores enim sit velit quibusdam. Ex molestiae recusandae et distinctio blanditiis aut
laudantium Quis.</p>
<p>Vel facere iure aut voluptatum adipisci sit rerum repudiandae qui vitae nihil rem numquam nulla cum eveniet
aperiam et voluptate culpa. Eum voluptate voluptates qui ipsam eius ut nobis facere id quia porro eum
explicabo pariatur in nobis sint. Sit culpa pariatur ut aliquid aliquid ut maiores ipsum est pariatur totam
et alias laudantium.</p>
<p>Non corporis voluptatibus et numquam aspernatur qui repellat quae qui sequi voluptatem. At magni sequi ut
expedita odit et officia doloribus ut repudiandae accusantium sed ipsa quam 33 doloribus unde!</p>
<p>Lorem ipsum dolor sit amet. Id dicta consequatur qui ipsum cupiditate qui numquam doloribus et possimus
obcaecati hic maiores natus ex molestiae labore est repudiandae totam? Aut quasi itaque qui earum expedita
ab quos adipisci qui dolores enim sit velit quibusdam. Ex molestiae recusandae et distinctio blanditiis aut
laudantium Quis.</p>
<p>Vel facere iure aut voluptatum adipisci sit rerum repudiandae qui vitae nihil rem numquam nulla cum eveniet
aperiam et voluptate culpa. Eum voluptate voluptates qui ipsam eius ut nobis facere id quia porro eum
explicabo pariatur in nobis sint. Sit culpa pariatur ut aliquid aliquid ut maiores ipsum est pariatur totam
et alias laudantium.</p>
<p>Non corporis voluptatibus et numquam aspernatur qui repellat quae qui sequi voluptatem. At magni sequi ut
expedita odit et officia doloribus ut repudiandae accusantium sed ipsa quam 33 doloribus unde!</p>
<div class="jumplink-wrap" id="aut_ducimus">
<h2>Aut ducimus</h2>
</div>
<p>Lorem ipsum dolor sit amet. In sint quos vel cupiditate nemo At unde quasi. Non minima molestiae sit dolorem
nostrum eum odit nihil vel nobis tempore sit voluptatibus dolorem. Non accusantium voluptate qui error iste
ut pariatur repudiandae At molestias obcaecati aut ipsa debitis. Sit ipsam dicta est ipsa iste et minus
voluptatibus et autem saepe et repudiandae nostrum.</p>
<p>Lorem ipsum dolor sit amet. Id dicta consequatur qui ipsum cupiditate qui numquam doloribus et possimus
obcaecati hic maiores natus ex molestiae labore est repudiandae totam? Aut quasi itaque qui earum expedita
ab quos adipisci qui dolores enim sit velit quibusdam. Ex molestiae recusandae et distinctio blanditiis aut
laudantium Quis.</p>
<p>Vel facere iure aut voluptatum adipisci sit rerum repudiandae qui vitae nihil rem numquam nulla cum eveniet
aperiam et voluptate culpa. Eum voluptate voluptates qui ipsam eius ut nobis facere id quia porro eum
explicabo pariatur in nobis sint. Sit culpa pariatur ut aliquid aliquid ut maiores ipsum est pariatur totam
et alias laudantium.</p>
<p>Non corporis voluptatibus et numquam aspernatur qui repellat quae qui sequi voluptatem. At magni sequi ut
expedita odit et officia doloribus ut repudiandae accusantium sed ipsa quam 33 doloribus unde!</p>
<p>Lorem ipsum dolor sit amet. Id dicta consequatur qui ipsum cupiditate qui numquam doloribus et possimus
obcaecati hic maiores natus ex molestiae labore est repudiandae totam? Aut quasi itaque qui earum expedita
ab quos adipisci qui dolores enim sit velit quibusdam. Ex molestiae recusandae et distinctio blanditiis aut
laudantium Quis.</p>
<p>Vel facere iure aut voluptatum adipisci sit rerum repudiandae qui vitae nihil rem numquam nulla cum eveniet
aperiam et voluptate culpa. Eum voluptate voluptates qui ipsam eius ut nobis facere id quia porro eum
explicabo pariatur in nobis sint. Sit culpa pariatur ut aliquid aliquid ut maiores ipsum est pariatur totam
et alias laudantium.</p>
<p>Non corporis voluptatibus et numquam aspernatur qui repellat quae qui sequi voluptatem. At magni sequi ut
expedita odit et officia doloribus ut repudiandae accusantium sed ipsa quam 33 doloribus unde!</p>
<p>Lorem ipsum dolor sit amet. Id dicta consequatur qui ipsum cupiditate qui numquam doloribus et possimus
obcaecati hic maiores natus ex molestiae labore est repudiandae totam? Aut quasi itaque qui earum expedita
ab quos adipisci qui dolores enim sit velit quibusdam. Ex molestiae recusandae et distinctio blanditiis aut
laudantium Quis.</p>
<p>Vel facere iure aut voluptatum adipisci sit rerum repudiandae qui vitae nihil rem numquam nulla cum eveniet
aperiam et voluptate culpa. Eum voluptate voluptates qui ipsam eius ut nobis facere id quia porro eum
explicabo pariatur in nobis sint. Sit culpa pariatur ut aliquid aliquid ut maiores ipsum est pariatur totam
et alias laudantium.</p>
<p>Non corporis voluptatibus et numquam aspernatur qui repellat quae qui sequi voluptatem. At magni sequi ut
expedita odit et officia doloribus ut repudiandae accusantium sed ipsa quam 33 doloribus unde!</p>
<p>A porro quibusdam ut eaque blanditiis et esse voluptates. Sed harum vitae et quia iste id laudantium minus et
possimus dolorum ut officia neque eos recusandae atque est perferendis expedita? Eum nesciunt omnis id
voluptatem excepturi qui quasi libero eos eligendi omnis et numquam aperiam ut illum inventore est debitis
voluptas. Et sint quia aut esse temporibus hic voluptas dolores est voluptatem delectus At omnis fugiat eum
nihil doloribus.</p>
<p>Sit quis distinctio ut rerum libero et asperiores repellendus vel accusantium voluptatibus quo culpa magnam
eum voluptatem nihil est possimus iusto. Et natus quos eum molestiae officiis non minus dolorem est sint
ducimus. Eum mollitia dolorem ut deserunt natus ea unde nihil.</p>
<div class="jumplink-wrap" id="sit_inventore_debitis">
<h2>Sit inventore debitis</h2>
</div>
<p>Lorem ipsum dolor sit amet. Et voluptatem nobis vel deleniti distinctio et placeat consequuntur qui aliquid
quisquam ex quia vitae. Sed cumque nostrum in velit necessitatibus vel quia quod ut magni optio est quam
aperiam non omnis illum.</p>
<p>Id illum vitae a facere soluta ut fugiat nostrum. Non sunt dolor ut soluta nihil est placeat repellendus ab
amet animi sit dolorem temporibus! Est voluptatem itaque eos eveniet deleniti qui voluptas facilis et
voluptatem doloremque et magnam amet est sequi quod.</p>
<div class="jumplink-wrap" id="et_corrupti">
<h2>Et corrupti</h2>
</div>
<p>Lorem ipsum dolor sit amet. Id dicta consequatur qui ipsum cupiditate qui numquam doloribus et possimus
obcaecati hic maiores natus ex molestiae labore est repudiandae totam? Aut quasi itaque qui earum expedita
ab quos adipisci qui dolores enim sit velit quibusdam. Ex molestiae recusandae et distinctio blanditiis aut
laudantium Quis.</p>
<p>Vel facere iure aut voluptatum adipisci sit rerum repudiandae qui vitae nihil rem numquam nulla cum eveniet
aperiam et voluptate culpa. Eum voluptate voluptates qui ipsam eius ut nobis facere id quia porro eum
explicabo pariatur in nobis sint. Sit culpa pariatur ut aliquid aliquid ut maiores ipsum est pariatur totam
et alias laudantium.</p>
<p>Non corporis voluptatibus et numquam aspernatur qui repellat quae qui sequi voluptatem. At magni sequi ut
expedita odit et officia doloribus ut repudiandae accusantium sed ipsa quam 33 doloribus unde!</p>
<p>Lorem ipsum dolor sit amet. Id dicta consequatur qui ipsum cupiditate qui numquam doloribus et possimus
obcaecati hic maiores natus ex molestiae labore est repudiandae totam? Aut quasi itaque qui earum expedita
ab quos adipisci qui dolores enim sit velit quibusdam. Ex molestiae recusandae et distinctio blanditiis aut
laudantium Quis.</p>
<p>Vel facere iure aut voluptatum adipisci sit rerum repudiandae qui vitae nihil rem numquam nulla cum eveniet
aperiam et voluptate culpa. Eum voluptate voluptates qui ipsam eius ut nobis facere id quia porro eum
explicabo pariatur in nobis sint. Sit culpa pariatur ut aliquid aliquid ut maiores ipsum est pariatur totam
et alias laudantium.</p>
<p>Non corporis voluptatibus et numquam aspernatur qui repellat quae qui sequi voluptatem. At magni sequi ut
expedita odit et officia doloribus ut repudiandae accusantium sed ipsa quam 33 doloribus unde!</p>
<p>Lorem ipsum dolor sit amet. Id dicta consequatur qui ipsum cupiditate qui numquam doloribus et possimus
obcaecati hic maiores natus ex molestiae labore est repudiandae totam? Aut quasi itaque qui earum expedita
ab quos adipisci qui dolores enim sit velit quibusdam. Ex molestiae recusandae et distinctio blanditiis aut
laudantium Quis.</p>
<p>Vel facere iure aut voluptatum adipisci sit rerum repudiandae qui vitae nihil rem numquam nulla cum eveniet
aperiam et voluptate culpa. Eum voluptate voluptates qui ipsam eius ut nobis facere id quia porro eum
explicabo pariatur in nobis sint. Sit culpa pariatur ut aliquid aliquid ut maiores ipsum est pariatur totam
et alias laudantium.</p>
<p>Non corporis voluptatibus et numquam aspernatur qui repellat quae qui sequi voluptatem. At magni sequi ut
expedita odit et officia doloribus ut repudiandae accusantium sed ipsa quam 33 doloribus unde!</p>
<p>Lorem ipsum dolor sit amet. Id nihil repellendus sit dolor excepturi quo aspernatur voluptates eum repellat
voluptate. Est obcaecati veritatis ut explicabo veritatis ut delectus quia ad accusamus dolore ut optio
consequatur et rerum tenetur qui quibusdam eligendi.</p>
<p>Rem recusandae aliquid est deserunt Quis aut unde nihil ea aliquam quisquam vel tempora quibusdam et autem
nemo. At magnam consequatur et reiciendis eligendi sit exercitationem voluptate ut dolorem harum est
doloremque repellendus cum beatae rerum. Et provident sint sed beatae molestiae eos quas distinctio. Est
voluptates commodi vel voluptatibus praesentium est sint saepe id quae amet et illum quam qui cupiditate
voluptatibus.</p>
<p>Aut numquam officia et doloremque praesentium et dolorum molestiae in illo nulla sed quos reprehenderit est
fuga dolorem sed quaerat blanditiis. Et voluptates consequatur sed cumque deserunt vel asperiores nulla est
ducimus tempora id quia sapiente ex repudiandae voluptatem 33 quaerat molestias.</p>
<p>Non ipsam reiciendis non nulla aliquam est voluptate veniam qui dolor blanditiis? Ea internos distinctio vel
eligendi veniam sit assumenda nesciunt eum eius quos cum aperiam autem eum quibusdam eius.</p>
<p>In fuga quia a praesentium accusamus sit dolores consectetur. Est nobis nostrum ut vitae labore aut odio
voluptatibus sit laboriosam expedita aut voluptas voluptatibus aut quia saepe ut recusandae unde.</p>
<p>Vel soluta rerum At rerum maxime aut aperiam neque aut enim voluptatibus qui laborum delectus ea sunt
repellendus. Et quia voluptatibus eum reprehenderit molestias vel amet sunt. Et quisquam ullam eum illum
nisi in aliquid recusandae et quam corrupti. Aut architecto dolor sit iure consequatur in nihil saepe ut
consequatur consequatur.</p>
<p>Lorem ipsum dolor sit amet. Id dicta consequatur qui ipsum cupiditate qui numquam doloribus et possimus
obcaecati hic maiores natus ex molestiae labore est repudiandae totam? Aut quasi itaque qui earum expedita
ab quos adipisci qui dolores enim sit velit quibusdam. Ex molestiae recusandae et distinctio blanditiis aut
laudantium Quis.</p>
<p>Vel facere iure aut voluptatum adipisci sit rerum repudiandae qui vitae nihil rem numquam nulla cum eveniet
aperiam et voluptate culpa. Eum voluptate voluptates qui ipsam eius ut nobis facere id quia porro eum
explicabo pariatur in nobis sint. Sit culpa pariatur ut aliquid aliquid ut maiores ipsum est pariatur totam
et alias laudantium.</p>
<p>Non corporis voluptatibus et numquam aspernatur qui repellat quae qui sequi voluptatem. At magni sequi ut
expedita odit et officia doloribus ut repudiandae accusantium sed ipsa quam 33 doloribus unde!</p>
<p>Lorem ipsum dolor sit amet. Id dicta consequatur qui ipsum cupiditate qui numquam doloribus et possimus
obcaecati hic maiores natus ex molestiae labore est repudiandae totam? Aut quasi itaque qui earum expedita
ab quos adipisci qui dolores enim sit velit quibusdam. Ex molestiae recusandae et distinctio blanditiis aut
laudantium Quis.</p>
<p>Vel facere iure aut voluptatum adipisci sit rerum repudiandae qui vitae nihil rem numquam nulla cum eveniet
aperiam et voluptate culpa. Eum voluptate voluptates qui ipsam eius ut nobis facere id quia porro eum
explicabo pariatur in nobis sint. Sit culpa pariatur ut aliquid aliquid ut maiores ipsum est pariatur totam
et alias laudantium.</p>
<p>Non corporis voluptatibus et numquam aspernatur qui repellat quae qui sequi voluptatem. At magni sequi ut
expedita odit et officia doloribus ut repudiandae accusantium sed ipsa quam 33 doloribus unde!</p>
<p>Lorem ipsum dolor sit amet. Id dicta consequatur qui ipsum cupiditate qui numquam doloribus et possimus
obcaecati hic maiores natus ex molestiae labore est repudiandae totam? Aut quasi itaque qui earum expedita
ab quos adipisci qui dolores enim sit velit quibusdam. Ex molestiae recusandae et distinctio blanditiis aut
laudantium Quis.</p>
<p>Vel facere iure aut voluptatum adipisci sit rerum repudiandae qui vitae nihil rem numquam nulla cum eveniet
aperiam et voluptate culpa. Eum voluptate voluptates qui ipsam eius ut nobis facere id quia porro eum
explicabo pariatur in nobis sint. Sit culpa pariatur ut aliquid aliquid ut maiores ipsum est pariatur totam
et alias laudantium.</p>
<p>Non corporis voluptatibus et numquam aspernatur qui repellat quae qui sequi voluptatem. At magni sequi ut
expedita odit et officia doloribus ut repudiandae accusantium sed ipsa quam 33 doloribus unde!</p>
<p>Lorem ipsum dolor sit amet. Id dicta consequatur qui ipsum cupiditate qui numquam doloribus et possimus
obcaecati hic maiores natus ex molestiae labore est repudiandae totam? Aut quasi itaque qui earum expedita
ab quos adipisci qui dolores enim sit velit quibusdam. Ex molestiae recusandae et distinctio blanditiis aut
laudantium Quis.</p>
<p>Vel facere iure aut voluptatum adipisci sit rerum repudiandae qui vitae nihil rem numquam nulla cum eveniet
aperiam et voluptate culpa. Eum voluptate voluptates qui ipsam eius ut nobis facere id quia porro eum
explicabo pariatur in nobis sint. Sit culpa pariatur ut aliquid aliquid ut maiores ipsum est pariatur totam
et alias laudantium.</p>
<p>Non corporis voluptatibus et numquam aspernatur qui repellat quae qui sequi voluptatem. At magni sequi ut
expedita odit et officia doloribus ut repudiandae accusantium sed ipsa quam 33 doloribus unde!</p>

Make your header position: sticky - therefore there's no need to set margin-top to anything
Use scroll-margin-top like: .jumplink-wrap {scroll-margin-top: var(--header-height); }
to smooth scroll use: scroll-behavior: smooth; on the html
Example:
* {
box-sizing: border-box;
margin: 0;
}
:root {
--header-height: 60px;
}
html {
overflow-y: scroll;
scroll-behavior: smooth;
}
.article-content {
max-width: 40rem;
font-size: 3rem;
}
header {
/* INSTEAD OF fixed */
position: sticky;
top: 0;
width: 100%;
height: var(--header-height);
border-bottom: 2px solid #000;
text-align: center;
background: hsla(127, 80%, 50%, 0.8);
}
header nav {
display: flex;
gap: 2rem;
}
header nav a {
padding: 1rem 0;
}
.jumplink-wrap {
scroll-margin-top: var(--header-height);
}
.nav {
/*padding-top: 70px; /* NOT NEEDED */
}
<header>
<nav class="nav" id="jumpNav">
Introduction
Aut ducimus
Sit inventore debitis
Et corrupti
</nav>
</header>
<div class="article-content">
<div class="jumplink-wrap" id="introduction">
<h2>Introduction</h2>
</div>
<p>ipsum dolor sit amet. Id dicta consequatur qui ipsum cupiditate qui numquam doloribus et possimus obcaecati hic maiores natus ex molestiae labore est repudiandae totam? Aut quasi itaque qui earum expedita ab quos adipisci qui dolores enim sit velit
quibusdam. Ex molestiae recusandae et distinctio blanditiis aut laudantium Quis.</p>
<p>Vel facere iure aut voluptatum adipisci sit rerum repudiandae qui vitae nihil rem numquam nulla cum eveniet aperiam et voluptate culpa. Eum voluptate voluptates qui ipsam eius ut nobis facere id quia porro eum explicabo pariatur in nobis sint. Sit culpa
pariatur ut aliquid aliquid ut maiores ipsum est pariatur totam et alias laudantium.</p>
<div class="jumplink-wrap" id="aut_ducimus">
<h2>Aut ducimus</h2>
</div>
<p>Lorem ipsum dolor sit amet. Id dicta consequatur qui ipsum cupiditate qui numquam doloribus et possimus obcaecati hic maiores natus ex molestiae labore est repudiandae totam? Aut quasi itaque qui earum expedita ab quos adipisci qui dolores enim sit
velit quibusdam. Ex molestiae recusandae et distinctio blanditiis aut laudantium Quis.</p>
<p>Vel facere iure aut voluptatum adipisci sit rerum repudiandae qui vitae nihil rem numquam nulla cum eveniet aperiam et voluptate culpa. Eum voluptate voluptates qui ipsam eius ut nobis facere id quia porro eum explicabo pariatur in nobis sint. Sit culpa
pariatur ut aliquid aliquid ut maiores ipsum est pariatur totam et alias laudantium.</p>
<div class="jumplink-wrap" id="sit_inventore_debitis">
<h2>Sit inventore debitis</h2>
</div>
<p>Lorem ipsum dolor sit amet. Id dicta consequatur qui ipsum cupiditate qui numquam doloribus et possimus obcaecati hic maiores natus ex molestiae labore est repudiandae totam? Aut quasi itaque qui earum expedita ab quos adipisci qui dolores enim sit
velit quibusdam. Ex molestiae recusandae et distinctio blanditiis aut laudantium Quis.</p>
<p>Vel facere iure aut voluptatum adipisci sit rerum repudiandae qui vitae nihil rem numquam nulla cum eveniet aperiam et voluptate culpa. Eum voluptate voluptates qui ipsam eius ut nobis facere id quia porro eum explicabo pariatur in nobis sint. Sit culpa
pariatur ut aliquid aliquid ut maiores ipsum est pariatur totam et alias laudantium.</p>
<div class="jumplink-wrap" id="et_corrupti">
<h2>Et corrupti</h2>
</div>
<p>Lorem ipsum dolor sit amet. Id dicta consequatur qui ipsum cupiditate qui numquam doloribus et possimus obcaecati hic maiores natus ex molestiae labore est repudiandae totam? Aut quasi itaque qui earum expedita ab quos adipisci qui dolores enim sit
velit quibusdam. Ex molestiae recusandae et distinctio blanditiis aut laudantium Quis.</p>
<p>Vel facere iure aut voluptatum adipisci sit rerum repudiandae qui vitae nihil rem numquam nulla cum eveniet aperiam et voluptate culpa. Eum voluptate voluptates qui ipsam eius ut nobis facere id quia porro eum explicabo pariatur in nobis sint. Sit culpa
pariatur ut aliquid aliquid ut maiores ipsum est pariatur totam et alias laudantium.</p>
ž
<p>Lorem ipsum dolor sit amet. Id dicta consequatur qui ipsum cupiditate qui numquam doloribus et possimus obcaecati hic maiores natus ex molestiae labore est repudiandae totam? Aut quasi itaque qui earum expedita ab quos adipisci qui dolores enim sit
velit quibusdam. Ex molestiae recusandae et distinctio blanditiis aut laudantium Quis.</p>
<p>Vel facere iure aut voluptatum adipisci sit rerum repudiandae qui vitae nihil rem numquam nulla cum eveniet aperiam et voluptate culpa. Eum voluptate voluptates qui ipsam eius ut nobis facere id quia porro eum explicabo pariatur in nobis sint. Sit culpa
pariatur ut aliquid aliquid ut maiores ipsum est pariatur totam et alias laudantium.</p>
</div>

Adjusting heights for flex items

document.addEventListener("DOMContentLoaded", () => {
let button = document.querySelector("button");
button.addEventListener("click", ev => {
let main = document.querySelector("main");
let box2 = document.createElement("div");
let box1 = document.querySelector(".box1");
box2.innerHTML = "<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>"
box2.classList.add("box2");
box2.classList.add("smallerWidth");
box1.classList.add("smallerWidth");
main.style.display = "flex";
main.insertAdjacentElement("afterbegin", box2);
ev.target.disabled = true;
});
});
.box1 {
background-color: blue;
color: white;
margin: 0 auto;
padding: 5px;
}
.box2 {
background-color: red;
color: white;
margin: 0 auto;
padding: 5px;
overflow: auto;
}
.smallerWidth {
width: 45%;
}
<main>
<div class="box1">
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui
dolorem eum fugiat quo voluptas nulla pariatur? Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum
qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
<button>CLICK HERE</button>
</div>
</main>
In the above code, there is a div with text and a button. If you click on the button, the main section is changed to a flex area and another div containing text is created and appears left of div1.
Let's say that the two divs (box1 and box2) can vary dynamically with how much text each contains. How can I make it so that box1's height is as small as possible (i.e. only tall enough to contain the text which can vary in length and button) and box2's height is no greater than that of box1? If box2 contains more text than can appear in its height, the scrollbar is added (hence, the overflow auto property defined on it).

Add height: 100% into .smallerWidth class and than you can detect which box is smaller and use it's height to set height of the other:
document.addEventListener("DOMContentLoaded", () => {
let button = document.querySelector("button");
button.addEventListener("click", ev => {
let main = document.querySelector("main");
let box2 = document.createElement("div");
let box1 = document.querySelector(".box1");
box2.innerHTML = "<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>"
box2.classList.add("box2");
box2.classList.add("smallerWidth");
box1.classList.add("smallerWidth");
main.style.display = "flex";
main.insertAdjacentElement("afterbegin", box2);
// set height to match smalest box
if (box1.scrollHeight > box2.scrollHeight)
box1.style.height = box2.scrollHeight + "px";
else
box2.style.height = box1.scrollHeight + "px";
ev.target.disabled = true;
});
});
.box1 {
background-color: blue;
color: white;
margin: 0 auto;
padding: 5px;
}
.box2 {
background-color: red;
color: white;
margin: 0 auto;
padding: 5px;
overflow: auto;
}
.smallerWidth {
width: 45%;
height: 100%;
}
<main>
<div class="box1">
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui
dolorem eum fugiat quo voluptas nulla pariatur? Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum
qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
<button>CLICK HERE</button>
</div>
</main>

Scroll indicator of a single html element

I'm trying to create a scroll indicator regarding a single HTML element. In my page I have a paragraph with overflow set to "scroll".
Problem is, I tried many methods and each of them only seem to work on the "main" scroll event of the whole page.
Following is my adaptation of the code found at:
https://www.w3schools.com/howto/howto_js_scroll_indicator.asp
I assigned the class name "content" to my < p >.
<script>
window.body.getElementsByClassName("content").onscroll = function() {myFunction()};
function myFunction() {
var winScroll = document.body.getElementsByClassName("content").scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
document.getElementById("myBar").style.width = scrolled + "%";
}
Gave this a shot to no avail, unfortunately.
That may be due to the fact I'm still learning.
Attached is also a preview of the current page.
As you can see, the grey scroll indicator is on top of it but it doesn't work when I scroll through the paragraph (< p >).
It may be quite simple but I can't figure this out.
<div class="header">
<div class="progress-container">
<div class="progress-bar" id="myBar"></div></div></div>
<a class="content">Lorem ipsum dolor sit amet, consectetur adipisci elit, sed do eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullamco laboriosam, nisi ut aliquid ex ea commodi consequatur. Duis aute irure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur? [33] At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.<br>
Thank you in advance!

So...
been manipulating my code a little bit.
This is what I found to work:
I assigned an id to my element, in this case "par".
I assigned " onscroll="myFunction()" " to my element.
(Optional) I assigned a class to style my element.
And then I inserted a javascript function inside my html file as a script (you can have a separate .js file, if you prefer so) with the following code. Keep in mind you must refer to your element with the same ID
< a class="content" onscroll="myFunction()" id="par">Your paragraph content < /a >
<script>
function myFunction() {
var winScroll = document.getElementById("par").scrollTop || document.getElementById("par").scrollTop;
var height = document.getElementById("par").scrollHeight - document.getElementById("par").clientHeight;
var scrolled = (winScroll / height) * 100;
document.getElementById("myBar").style.width = scrolled + "%";
}
</script>
Hope this will clear some doubts about my question. This may look uber-simple to some of you but it wasn't on my part. Have a nice day!

Readmore doesn't work when I have an unorderlist

When I have an unordered list of paragraph text inside the container, the read more/readless does not hide any text before the UL list
https://codepen.io/tickatop/pen/NZavXg
Almost made me run crazy
<div class= "col2">
<p class="lead" height="50">>
<strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem cum quisquam praesentium incidunt, ad, placeat debitis voluptatum, quidem quo velit architecto eligendi </strong>voluptate officia soluta explicabo aliquam facilis illo temporibus sint eaque repudiandae quis ducimus! Placeat exercitationem ex voluptate ratione aut facere cupiditate sunt. Officiis veniam, inventore dolore. Soluta temporibus, veritatis labore optio enim consectetur ipsa?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti sequi non qui, quas, quod ad vel facilis consectetur sint, culpa eum. Maiores, maxime, quisquam. Assumenda error sapiente numquam quibusdam praesentium perspiciatis minima, architecto maiores ipsa, <ul>
<li>ndskdsmd</li>
<li>sdkdnskdskds</li>
<li>dskdnskdnskdsnk</li>
</ul>corporis, soluta dolor magnam vel id quis eveniet recusandae asperiores totam sit eligendi commodi. Nam nemo, dicta. Ut asperiores commodi sint debitis laborum harum facilis, dolore obcaecati vel adipisci dolorem modi quas eos deserunt quae sed explicabo magnam reiciendis dolores odit ex nulla a! Impedit nulla unde, hic, commodi explicabo omnis nisi sed, recusandae quam possimus, magnam qui. Ex non laborum libero tempore similique, id.
Perspiciatis provident accusamus esse possimus, eveniet corrupti exercitationem magni soluta consequuntur nobis! Sequi molestiae repellat optio quaerat tempora veritatis illum voluptatem pariatur reiciendis? Repudiandae fugiat dignissimos, dolore laborum laudantium tempora odit, quo, labore animi eos nesciunt. Dicta nam voluptatum eaque suscipit nihil accusamus consequuntur. </p>
<button class="more more-lead">Read more...</button>
</div>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>

I'm not sure if this is helpful or not, but it has the function you are hoping for so it is an alternative at least. It also works for any number of read-more sections on a single page.
Note that the read more button has the class .more, and an attribute for which links it to the element that it sets the height for.
Hope this helps
Demo
// Hide on load via jquery to avoid issues where JS is disabled
// Cycle through each more button
$(".more").each(function() {
// Find ID and store element
id = $(this).attr("for");
elem = $("#" + id);
// Set height from inline property
elem.css("height", elem.attr("height")).css("overflow", "hidden");
});
// Add click event to more button
$(".more").click(function() {
// Find ID and store element
id = $(this).attr("for");
elem = $("#" + id);
// Toggle expanded class
// Could check for inline property being auto / set and adjust if you want to avoid an !important CSS rule
elem.toggleClass("expanded");
// Toggle text of buttons
if ($(this).text() == "Read more...") {
$(this).text("Read less...");
} else {
$(this).text("Read more...");
}
})
.expanded {
height: auto !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col2">
<div id="lead" height="50">
<p>
<strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem cum quisquam praesentium incidunt, ad, placeat debitis voluptatum, quidem quo velit architecto eligendi </strong>voluptate officia soluta explicabo aliquam facilis illo temporibus
sint eaque repudiandae quis ducimus! Placeat exercitationem ex voluptate ratione aut facere cupiditate sunt. Officiis veniam, inventore dolore. Soluta temporibus, veritatis labore optio enim consectetur ipsa? Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Corrupti sequi non qui, quas, quod ad vel facilis consectetur sint, culpa eum. Maiores, maxime, quisquam. Assumenda error sapiente numquam quibusdam praesentium perspiciatis minima, architecto maiores ipsa,
</p>
<ul>
<li>ndskdsmd</li>
<li>sdkdnskdskds</li>
<li>dskdnskdnskdsnk</li>
</ul>
<p>corporis, soluta dolor magnam vel id quis eveniet recusandae asperiores totam sit eligendi commodi. Nam nemo, dicta. Ut asperiores commodi sint debitis laborum harum facilis, dolore obcaecati vel adipisci dolorem modi quas eos deserunt quae sed explicabo
magnam reiciendis dolores odit ex nulla a! Impedit nulla unde, hic, commodi explicabo omnis nisi sed, recusandae quam possimus, magnam qui. Ex non laborum libero tempore similique, id. Perspiciatis provident accusamus esse possimus, eveniet corrupti
exercitationem magni soluta consequuntur nobis! Sequi molestiae repellat optio quaerat tempora veritatis illum voluptatem pariatur reiciendis? Repudiandae fugiat dignissimos, dolore laborum laudantium tempora odit, quo, labore animi eos nesciunt.
Dicta nam voluptatum eaque suscipit nihil accusamus consequuntur. </p>
</div>
<button class="more" for="lead">Read more...</button>
</div>
<div class="col2">
<div id="second" height="50">
<p>
<strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem cum quisquam praesentium incidunt, ad, placeat debitis voluptatum, quidem quo velit architecto eligendi </strong>voluptate officia soluta explicabo aliquam facilis illo temporibus
sint eaque repudiandae quis ducimus! Placeat exercitationem ex voluptate ratione aut facere cupiditate sunt. Officiis veniam, inventore dolore. Soluta temporibus, veritatis labore optio enim consectetur ipsa? Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Corrupti sequi non qui, quas, quod ad vel facilis consectetur sint, culpa eum. Maiores, maxime, quisquam. Assumenda error sapiente numquam quibusdam praesentium perspiciatis minima, architecto maiores ipsa,
</p>
<ul>
<li>ndskdsmd</li>
<li>sdkdnskdskds</li>
<li>dskdnskdnskdsnk</li>
</ul>
<p>corporis, soluta dolor magnam vel id quis eveniet recusandae asperiores totam sit eligendi commodi. Nam nemo, dicta. Ut asperiores commodi sint debitis laborum harum facilis, dolore obcaecati vel adipisci dolorem modi quas eos deserunt quae sed explicabo
magnam reiciendis dolores odit ex nulla a! Impedit nulla unde, hic, commodi explicabo omnis nisi sed, recusandae quam possimus, magnam qui. Ex non laborum libero tempore similique, id. Perspiciatis provident accusamus esse possimus, eveniet corrupti
exercitationem magni soluta consequuntur nobis! Sequi molestiae repellat optio quaerat tempora veritatis illum voluptatem pariatur reiciendis? Repudiandae fugiat dignissimos, dolore laborum laudantium tempora odit, quo, labore animi eos nesciunt.
Dicta nam voluptatum eaque suscipit nihil accusamus consequuntur. </p>
</div>
<button class="more" for="second">Read more...</button>
</div>

Scroll to Expandable area within a Tab pane

First of all... i must say i am a beginner in website creating... and like any other beginner got stuck on a problem...
I have a tab panel, within this tabs i have collapsible Elements. What i want to achieve is when a panel is expanded to center it on the screen, or scroll it into view.
Here's the code:
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
body {
background-color: black;
color: white }
/* unvisited link */
a:link {
color: red;
}
/* visited link */
a:visited {
color: red;
}
/* mouse over link */
a:hover {
text-decoration: underline;
}
/* selected link */
a:active {
color: white;
}
* {
box-sizing: border-box}
body {
font-family: "Lato", sans-serif;
}
/* Style the tab */
div.tab {
float: left;
border: 1px solid black;
background-color: Black;
width: 20%;
height: 300px;
color: white;
}
/* Style the buttons inside the tab */
div.tab button {
display: block;
background-color: inherit;
color: white;
padding: 16px 16px;
width: 100%;
border: none;
outline: none;
text-align: left;
cursor: pointer;
transition: 0.3s;
font-size: 20px;
}
/* Change background color of buttons on hover */
div.tab button:hover {
text-decoration: underline;
}
/* Create an active/current "tab button" class */
div.tab button.active {
background-color: black;
}
/* Style the tab content */
.tabcontent {
float: left;
padding: 0px 12px;
border: 1px solid black;
width: 70%;
border-left: none;
height: 300px;
}
.massive-font{
font-size: 25px;
text-align: left;
line-height:1.5;
}
.normal-font{
font-size: 18px;
text-align: left;
line-height:2;
}
.tooltip-font{
font-size: 18px;
text-align: left;
line-height:1.5;
color:#f2f2f2;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="tab">
<button class="tablinks" onclick="openCity(event, 'First_Tab')" id="defaultOpen">Tab1</button>
</div>
<div id="First_Tab" class="tabcontent">
<h1>
Some Header 1
</h1>
<p>
<div class="massive-font">
Title1
</div>
<div class="normal-font">
<div id="line1" class="collapse">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Sed ut perspiciatis unde omnis iste natus error sit
voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed
quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam
aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae
consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?" Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem
vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</div>
</div>
<p>
<div class="massive-font">
Title2
</div>
<div class="normal-font">
<div id="line2" class="collapse">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Sed ut perspiciatis unde omnis iste natus error sit
voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed
quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam
aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil
molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?" Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt
explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur,
adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</div>
</div>
<p>
<div class="massive-font">
Title3
</div>
<div class="normal-font">
<div id="line3" class="collapse">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Sed ut perspiciatis unde omnis iste natus error
sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,
sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore
magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam
nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?" Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
in culpa qui officia deserunt mollit anim id est laborum Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae
vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit
amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid
ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</div>
</div>
<p>
<div class="massive-font">
Title4
</div>
<div class="normal-font">
<div id="line4" class="collapse">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Sed ut perspiciatis unde omnis iste natus error
sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut
fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore
et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit
esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto
beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia
dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam,
nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</div>
</div>
</div>
I've done tons of searching, haven't manage to find something to work.
Problem is, i have a lot of this collapsible elements, and when there are more the 3 open, the drift out of the browsers window.
Additional to the scroll into view function, i would also like it, that if a tab is open, and another tab is clicked, this first tab should close.

To scroll the expanded content to the top of the screen, you can listen to Bootstrap's shown.bs.collapse event, and then animate the corresponding element.
shown.bs.collapse
This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete).
Here is an example. The event listening code is:
$('.collapse').on('shown.bs.collapse', function(e) {
var panel = $(e.target);
$('html, body').animate({
scrollTop: panel.offset().top
}, 500);
});
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
$('.collapse').on('shown.bs.collapse', function(e) {
var panel = $(e.target);
$('html, body').animate({
scrollTop: panel.offset().top
}, 500);
});
body {
background-color: black;
color: white }
/* unvisited link */
a:link {
color: red;
}
/* visited link */
a:visited {
color: red;
}
/* mouse over link */
a:hover {
text-decoration: underline;
}
/* selected link */
a:active {
color: white;
}
* {
box-sizing: border-box}
body {
font-family: "Lato", sans-serif;
}
/* Style the tab */
div.tab {
float: left;
border: 1px solid black;
background-color: Black;
width: 20%;
height: 300px;
color: white;
}
/* Style the buttons inside the tab */
div.tab button {
display: block;
background-color: inherit;
color: white;
padding: 16px 16px;
width: 100%;
border: none;
outline: none;
text-align: left;
cursor: pointer;
transition: 0.3s;
font-size: 20px;
}
/* Change background color of buttons on hover */
div.tab button:hover {
text-decoration: underline;
}
/* Create an active/current "tab button" class */
div.tab button.active {
background-color: black;
}
/* Style the tab content */
.tabcontent {
float: left;
padding: 0px 12px;
border: 1px solid black;
width: 70%;
border-left: none;
height: 300px;
}
.massive-font{
font-size: 25px;
text-align: left;
line-height:1.5;
}
.normal-font{
font-size: 18px;
text-align: left;
line-height:2;
}
.tooltip-font{
font-size: 18px;
text-align: left;
line-height:1.5;
color:#f2f2f2;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="tab">
<button class="tablinks" onclick="openCity(event, 'First_Tab')" id="defaultOpen">Tab1</button>
</div>
<div id="First_Tab" class="tabcontent">
<h1>
Some Header 1
</h1>
<p>
<div class="massive-font">
Title1
</div>
<div class="normal-font">
<div id="line1" class="collapse">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Sed ut perspiciatis unde omnis iste natus error sit
voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed
quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam
aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae
consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?" Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem
vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</div>
</div>
<p>
<div class="massive-font">
Title2
</div>
<div class="normal-font">
<div id="line2" class="collapse">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Sed ut perspiciatis unde omnis iste natus error sit
voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed
quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam
aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil
molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?" Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt
explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur,
adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</div>
</div>
<p>
<div class="massive-font">
Title3
</div>
<div class="normal-font">
<div id="line3" class="collapse">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Sed ut perspiciatis unde omnis iste natus error
sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,
sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore
magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam
nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?" Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
in culpa qui officia deserunt mollit anim id est laborum Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae
vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit
amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid
ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</div>
</div>
<p>
<div class="massive-font">
Title4
</div>
<div class="normal-font">
<div id="line4" class="collapse">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Sed ut perspiciatis unde omnis iste natus error
sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut
fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore
et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit
esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto
beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia
dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam,
nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</div>
</div>
</div>