Javascript fixed menu scroll glitch

Javascript fixed menu scroll glitch - javascript

var navbar = document.getElementById("navbar");
let sticky = false;
const threshold = 150;
window.onscroll = function myFunction() {
if (!sticky && window.pageYOffset >= threshold) {
navbar.classList.add("sticky");
sticky = true;
} else if (sticky && window.pageYOffset < threshold) {
navbar.classList.remove("sticky");
sticky = false;
}
}
#navbar {
overflow: hidden;
background-color: #333;
}
#navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
background-color:green !important;
}
<div id="navbar">
<a>Home</a>
<a>News</a>
<a>Contact</a>
</div>
<div class="content">
<h3>Sticky Navigation Example</h3>
<p>"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati 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.""At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem
I get an error when I scroll the page.
I tried everything about this problem but couldn't figure it out. How can fix it. Thank you.
Note: I don't want to do it with jquery.
jsfiddle: https://jsfiddle.net/gvc2xzaf/

You are constantly toggling your class on each scroll event and this is creating the flicker effect.
You must keep track of the state of your header using a variable, here called sticky.
To add your sticky class, you need your variable to be false (header not sticky) and the page offset to be above a threshold.
On the contrary, your remove your sticky class only when the variable is true (header sticky) and the page offset is below the threshold.
var navbar = document.getElementById("navbar");
let sticky = false;
const threshold = 150;
window.onscroll = function myFunction() {
if (!sticky && window.pageYOffset >= threshold) {
navbar.classList.add("sticky");
sticky = true;
} else if (sticky && window.pageYOffset < threshold) {
navbar.classList.remove("sticky");
sticky = false;
}
}
#navbar {
overflow: hidden;
background-color: #333;
}
#navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
background-color:green !important;
}
<div id="navbar">
<a>Home</a>
<a>News</a>
<a>Contact</a>
</div>
<div class="content">
<h3>Sticky Navigation Example</h3>
<p>"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati 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.""At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati 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.""At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati 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.""At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati 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.""At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati 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.""At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem
</div>

Related

How to make a moving block (part of the site) and fix

Calling e.preventDefault() Stops TouchEvents from Scrolling Page, but any Additional Click Listeners Don't Fire

I have a tab that slides up and it can be closed with user based touch events for mobile devices. I got this sliding tab/modal to work well and it is a piece of code that is dynamically appended to the DOM.
Once this code is dynamically appended to the DOM, I also dynamically add certain event listeners. I got super stuck when I realized that my click event listener wasn't firing.
It got even more confusing when I noticed I could use .click() on the target element and it would fire but clicking on it would not work.
I figured out why this happened and it turns out that calling e.preventDefault() inside of my click event listeners was causing my click event not to work.
I am stuck on how to move forward here because e.preventDefault() keeps my page from scrolling when the tab is being swiped, but it is causing other events not to fire that are dynamically added inside of the tab.
1.) Setting passive to true stops e.preventDefault from being called and without e.preventDefault(), whole page scrolls. Is there a way to stop page from scrolling without calling e.preventDefault()?
2.) Why does e.preventDefault stop inner click event from running?
3.) Why does click() work still?
4.) How could this be better written that the page doesnt scroll and events can be dynamically added?
Here is a runnable example:
https://stackblitz.com/edit/js-uruonq?file=index.js
function openTab(config) {
const { onRender } = config
document.querySelector('#main').insertAdjacentHTML('beforeend', `
<div class="swipe-tab">
<div class="swipe-tab__content></div>
</div>
`)
const swipeTab = document.querySelector('.swipe-tab')
/**
* just assume these functions make the tab follow
* the users finger
*/
swipeTab.addEventListener('touchstart', e => {
e.preventDefault()
})
swipeTab.addEventListener('touchmove', e => {
// e.preventDefault() stops the whole page from scrolling
e.preventDefault()
})
swipeTab.addEventListener('touchend', e => {
e.preventDefault()
})
if (onRender) onRender()
}
openTab({
onRender() {
document.querySelector('.swipe-tab__content').insertAdjacentHTML('beforeend', `
<button class="test-btn"></button>
`)
const btn = document.querySelector('.swipe-tab .test-btn')
btn.addEventListener('click', e => {
// this will not log. e.preventDefault() stops this from working
console.log('clicked')
})
// this still works for some reason
btn.click()
}
})

What if you use CSS to prevent the scrolling behavior? For example, you could set the body to have a position fixed.
Demo (definitely not production code)
Instructions: Scroll to the buttons, click the FIX button FIRST. The page can no longer scroll. Click the UNFIX button and the page scrolls freely again. I added lots of content in there to point out that you'd need to keep track of the current scroll position before setting the position to fixed, and restore it after.
const fix = document.getElementById('fixed');
const unfix = document.getElementById('unfixed');
const bodyEl = document.body;
const docEl = document.documentElement;
fix.addEventListener('click', (e) => {
const top = docEl.scrollTop;
bodyEl.style.top = `${top * -1}px`;
bodyEl.style.position = 'fixed';
})
unfix.addEventListener('click', (e) => {
const top = bodyEl.style.top;
const scrollTopValue = top && top !== 'auto' ? parseInt(top.match(/\d+/gi)[0]) : 0;
bodyEl.removeAttribute('style');
docEl.scrollTop = scrollTopValue;
})
body {
font-family: sans-serif;
}
button {
background: red;
color: white;
padding: 1rem;
border: 2px solid crimson;
border-radius: .25rem;
font: inherit;
}
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Esse dolorem repellendus, odit, iste labore exercitationem consequatur, placeat autem dolorum rerum voluptas possimus non laboriosam neque perferendis sequi architecto quos officiis?</p>
<p>At vel doloremque perferendis optio molestias architecto ratione laboriosam! Consequatur rem asperiores numquam quia accusamus ipsam voluptate modi? Nemo in libero dicta quisquam similique sed veniam totam labore nam delectus.</p>
<p>Minus corporis labore commodi quae saepe nobis, unde impedit est pariatur vero quos similique tenetur deleniti architecto odio veritatis dolorum nulla officia illo eos incidunt ullam! Impedit quibusdam officiis molestias!</p>
<p>Expedita similique, repellendus labore error asperiores suscipit mollitia aperiam molestias fugit nihil quae ipsa officia nemo blanditiis quidem tenetur id dolor sapiente quibusdam sit laudantium voluptatum! Similique eaque repellat iste!</p>
<p>Cumque quod unde totam neque minima nemo, similique praesentium nulla, ea voluptas accusamus at mollitia, delectus deserunt. Aspernatur deserunt laboriosam non quod eos aut, expedita veritatis, perspiciatis modi culpa rerum.</p>
<p>Nostrum soluta illum sit eveniet, consectetur dolor molestiae, culpa aspernatur labore dicta earum iste doloremque quisquam ea et laudantium optio? Eaque ratione rerum optio, quas ad dolorum ullam harum qui?</p>
<p>Nisi voluptas exercitationem eligendi temporibus, sequi tempora dolor rem, maxime dignissimos ut placeat aliquid obcaecati nobis! Eligendi recusandae tempora, a impedit magni sunt nam non, deleniti ab blanditiis consectetur consequatur.</p>
<p>Voluptatum ipsa id maxime necessitatibus distinctio delectus deserunt, nesciunt officiis fugit labore doloremque, voluptatem iusto mollitia soluta, eligendi ducimus tenetur repudiandae dolorem aspernatur corrupti velit! Sed, dolorum. Vitae, similique quos!</p>
<p>Autem id temporibus doloribus veniam, corporis at nihil consectetur ut obcaecati iusto? Illum distinctio, nisi magni itaque quidem ratione ab esse porro neque hic laboriosam a suscipit aliquid ipsam odit.</p>
<p>Dicta et ducimus est consectetur tenetur at officiis, deleniti hic porro sunt? Ipsam, sed. Ut commodi recusandae quasi quis, natus adipisci corporis exercitationem, rerum perferendis voluptatibus at voluptate. Culpa, corrupti.</p>
<p>Ut aliquam dolorum tempore, eius esse libero repudiandae amet laboriosam nihil ipsum veniam assumenda neque fugit ipsa accusantium veritatis consequuntur exercitationem, ipsam unde, ad natus. Dignissimos commodi magni aliquam ab.</p>
<p>Dolorum, dolore porro. Enim ipsum eaque iste delectus dolor sint, aperiam veritatis soluta odio a provident, exercitationem expedita est, ipsam eligendi quidem? Sequi nostrum ratione nemo necessitatibus est nesciunt nobis.</p>
<p>Rerum enim reiciendis nihil officia aut ex, recusandae exercitationem dolores eos ipsum quos vero, minus aliquam et commodi! Commodi repellat debitis expedita magnam vel odio nihil dolorum, eos eligendi recusandae?</p>
<p>Culpa quasi quaerat quia atque? Temporibus officia sint consequatur animi rerum, molestias accusamus quod veniam in numquam. Provident quasi perspiciatis quos, inventore sint eius eos voluptate dolorem suscipit enim laboriosam.</p>
<p>Consectetur atque distinctio maiores necessitatibus minima provident voluptas sequi culpa optio enim eaque, ex sunt totam. In ea sequi fuga perspiciatis recusandae, asperiores quae, sunt ab adipisci quisquam, placeat laborum.</p>
<p>Sapiente iusto, quas labore possimus et recusandae molestias explicabo illo beatae! Iste culpa nihil excepturi est ratione vel, non, libero, cumque inventore maxime labore facere iusto sequi sint quos consequatur!</p>
<p>Commodi quo, in debitis nobis eum quaerat architecto eius laboriosam eveniet dicta tempore culpa nulla soluta dignissimos ab eligendi deleniti, doloribus amet voluptatem facilis officia iure rem dolorem. Magni, obcaecati!</p>
<p>Molestias voluptatem incidunt quas molestiae debitis facere praesentium dicta dolorum unde saepe aperiam quam odit magni in, explicabo sit nesciunt soluta, commodi dolor. Quod exercitationem quidem voluptas consequuntur praesentium saepe.</p>
<p>Eos accusamus ab voluptates quidem incidunt molestiae, nam delectus tempore libero cupiditate, labore doloribus qui praesentium fuga natus ratione iusto quia minima aut! Voluptatibus ut, asperiores velit quod nihil porro.</p>
<p>Porro quidem magni earum id assumenda odio minima. Aspernatur aut dolore quidem laudantium, ipsum modi dolores odio at unde. Pariatur eos reiciendis dolores accusamus similique commodi minus laboriosam rerum ratione.</p>
<p>Magni, ex possimus, recusandae molestias totam numquam laudantium quis sed placeat quod inventore? Perferendis facere, amet dignissimos repellat officiis ea mollitia pariatur voluptates, minima, ipsa provident veritatis explicabo dolore dolorem!</p>
<p>Sed, nostrum? Quia nisi ratione quam nesciunt rem blanditiis sunt tempore deserunt quos numquam exercitationem repellat libero quae nostrum nihil repudiandae dolorum eius magni, minus qui architecto doloribus ad. Corporis.</p>
<p>Eos minima, aspernatur deserunt excepturi ipsum iusto? Amet molestiae expedita magni cupiditate, ratione iste modi laudantium soluta, possimus deserunt commodi sit perspiciatis totam ut alias odio eius sunt nam culpa.</p>
<button id="fixed">Click to fix</button>
<button id="unfixed">Click to unfix</button>
<p>Tempora alias in laudantium quos officiis officia illum voluptatum facere sed voluptatem nisi id ex similique placeat ipsa dolores molestias consequatur consectetur, rerum minus! Distinctio dolore commodi nihil similique? Excepturi.</p>
<p>Tenetur repellat dolorem adipisci aspernatur? Expedita cupiditate quaerat, libero ad iusto in vel suscipit magni possimus aliquid culpa soluta rem sunt? Autem ratione ipsam quia quo facilis rem veritatis perferendis?</p>
<p>Culpa libero quia et voluptate rem, magnam iusto nesciunt voluptatibus non dolores voluptatum nihil aperiam, nemo neque. Ad asperiores sequi pariatur dolor rerum illo nisi nam temporibus explicabo, blanditiis hic.</p>
<p>Numquam, officia aut! Officiis non delectus error cum a voluptatem consequatur expedita quaerat amet provident soluta, totam facere incidunt voluptatum nam at. Quia, asperiores molestiae. Quis libero odit quisquam ipsa.</p>
<p>Earum hic deleniti, sit ea consequatur vitae dolorem facere deserunt sunt doloremque commodi, voluptate perspiciatis. Illum dolore temporibus hic blanditiis repudiandae fugiat natus? Amet architecto totam inventore asperiores aliquid molestiae?</p>
<p>Dolore dignissimos nesciunt enim exercitationem, eligendi nihil itaque laudantium aperiam adipisci tenetur ipsam esse eos, perferendis, at maiores. Esse facilis tenetur suscipit iste atque officia, beatae fuga ut iure laborum.</p>
<p>Ipsum voluptatum tempore adipisci sed! Perferendis est eius sed odio fuga. Ea culpa, modi optio laboriosam cupiditate nesciunt, necessitatibus tenetur corporis officia libero quis dolores iure obcaecati ab voluptatem quae.</p>
<p>Voluptate, dignissimos dolor nam animi et eligendi commodi nesciunt minima veritatis facilis ullam hic aperiam perspiciatis itaque molestias ex laboriosam a, deleniti enim ratione autem magnam? Iure obcaecati nisi aspernatur.</p>
<p>Praesentium harum, cum quibusdam aliquid sed laboriosam facilis ipsa iure officia modi dicta possimus consequatur adipisci tempore qui natus eaque beatae laudantium illo nihil iste blanditiis architecto eius. Tenetur, molestias!</p>
<p>Mollitia molestiae voluptatem vero, sed quod aliquid possimus quae quas minima neque facere cumque, dicta temporibus cum ipsum culpa minus? Commodi numquam architecto maiores recusandae sapiente ratione dolore quam facilis!</p>
<p>Esse quis quibusdam quos saepe dicta sequi, animi iure nostrum officia qui, aliquam a assumenda reiciendis odit soluta nesciunt amet ea? Voluptas saepe deleniti quae. Ullam maiores aliquid excepturi repellat!</p>
<p>Fuga nulla quae, ex eaque sit labore officiis error? Saepe, laborum! Impedit mollitia quidem perspiciatis eaque, quas velit sint expedita eum facilis veritatis ad quia dicta ab, labore quos temporibus?</p>
<p>Assumenda odio voluptatibus nulla quaerat temporibus, rerum veritatis consectetur ullam dolores aspernatur praesentium sint et delectus dicta. Mollitia repellat officia officiis explicabo nostrum deserunt ipsam, minima, at earum facere laudantium!</p>
<p>Veniam, labore odit. Eligendi ex voluptates ad ut magnam est et, praesentium, facere reiciendis libero sunt officia officiis velit? Aspernatur blanditiis sequi modi cumque molestiae, tenetur autem voluptatibus explicabo repellat?</p>
<p>Necessitatibus aperiam quo maiores, laudantium ipsum vero consectetur nam mollitia obcaecati commodi fuga doloribus quae repudiandae magni in dolorum rem quisquam ea porro perferendis animi quas nostrum dicta dolor. Eum.</p>
<p>Tenetur sit inventore, iure adipisci, aspernatur repellat odio quas, neque minima quae praesentium itaque excepturi perspiciatis? Dignissimos cumque, ad quae quidem magni at magnam totam vel quaerat nesciunt corrupti placeat.</p>
<p>Suscipit repudiandae fugiat harum iusto cumque minus atque consequuntur voluptatibus? Aliquam neque doloribus magnam repellat voluptates incidunt suscipit, eos aut, vero officiis voluptas possimus ipsam itaque quam hic optio nemo.</p>
<p>Veritatis, harum quaerat tempore sed nisi doloribus molestiae itaque officia voluptas officiis accusantium commodi totam incidunt illo odio saepe! Facere fugit beatae adipisci dolor, laboriosam odit laudantium cupiditate quas nesciunt.</p>
<p>Iure deleniti vitae illo, est repellat quo aliquid officia dolor vero quisquam nihil. Pariatur nobis corporis eius nemo, adipisci incidunt repellendus odio voluptate eligendi esse fugiat maxime asperiores perferendis. Eius.</p>
<p>Provident mollitia similique, praesentium illum quidem voluptates iure libero tempora iste ullam fugit distinctio deserunt dicta ducimus qui ex voluptatum reiciendis officiis quos enim! Natus illo voluptatum iusto obcaecati quibusdam?</p>
<p>Nisi delectus voluptatum necessitatibus quod iste? Molestias velit rerum quibusdam itaque perferendis nesciunt culpa eos quaerat perspiciatis. Unde corporis voluptas culpa dignissimos nam velit autem. Sit eveniet ex tempora autem.</p>
<p>Rerum culpa aspernatur modi ipsum sapiente voluptas, delectus voluptatem eligendi eius. Quidem, culpa suscipit, veniam officia consequatur perspiciatis debitis, nihil at ab iure necessitatibus atque laudantium et eius autem quasi?</p>
<p>Provident cumque, veniam harum vero voluptatem eligendi, saepe nulla temporibus nihil similique fugit! Maxime quis ducimus deleniti, sint inventore tempora adipisci exercitationem consequuntur saepe iusto facere totam mollitia reiciendis fugit.</p>
<p>Enim quae sunt eius consectetur, aliquam ratione dolorum tenetur molestias eaque et animi, impedit alias omnis id optio in amet reprehenderit quam odio porro ipsum. Pariatur voluptatem earum aliquid nostrum?</p>
<p>Asperiores exercitationem officia sapiente odit architecto error saepe autem non aperiam deserunt enim unde vitae suscipit neque, nulla incidunt ratione possimus nemo dicta mollitia? Ullam nostrum ipsum suscipit repellat tenetur.</p>
<p>Possimus porro labore, voluptatum saepe inventore repellat nisi, natus impedit illo tempora nostrum corporis recusandae ipsam explicabo qui quae dolor, consequatur aliquid beatae ad voluptate voluptas. Sunt omnis dolorem tempora.</p>
<p>Minus, odio? Inventore, magni. Laudantium perspiciatis aut quas molestiae quae alias neque natus voluptate eveniet odit exercitationem, officiis, aliquid excepturi nihil. Et architecto modi, fugit fuga adipisci assumenda nesciunt! Neque?</p>

Nav Bar Pills to the Left and Text to the Right Bootstrap5

I am trying to have all my nav pills to the left and then add a single text element to the nav bar that aligns to the left/end and stays at the end of the navbar when the page is resized.
Navbar Img
I thought I solved this by adding a div so that the navbar pills would take up 50% width and the text width would also be 50% but set text-align to end. The only problem is when I add this div it separates the nav-links from their nav-pills and this causes the data-bs-toggle="pill" function not to work.
The top navbar has the text "RMWLL" position correctly but the pill toggle doesn't work.
The bottom navbar has the text incorrectly positioned but the pill toggle does work.
I want a combination where both the pill toggle work and the text is correctly positioned.
'''
<!DocType html>
<html lang="en">
<title>LMS 1</title>
<head>
<meta content="width=device-width, initial-scale=1, minimum-scale=1" name="viewport" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://kit.fontawesome.com/94a9ffdfe8.js" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js"></script>
<style>
.nav{
background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(14,0,0,1) 67%, rgba(19,29,178,1) 100%);
}
.nav-content{
display: flex;
width:50%;
}
.league-name{
color: white;
text-align: end;
padding: 20px;
width:50%;
}
.nav-pills .nav-link.active{
background-color: #131db2;
color: white;
}
.nav-link{
color: white;
}
.mainContent{
background-color: white;
border-radius: 15px;
}
.teamContent{
background-color: lightyellow;
border-radius: 15px;
}
body{
background-color: #D3D3D3;
padding-top: 150px;
}
.hidden{
display:none;
}
.test{
width: 16%;
display: flex;
}
</style>
<script>
function show(shown, hidden) {
document.getElementById(shown).style.display='block';
document.getElementById(hidden).style.display='none';
return false;
}
</script>
</head>
<body>
<!--HEADER-NAVIGATION -->
<div class="container-fluid fixed-top">
<div class="row">
<nav class="navbar">
<ul class="nav w-100 nav-pills" role="tablist">
<div class="nav-content ">
<a class="navbar-brand p-2 m-0 pe-5" href="#">
<img src="favicon_drawing.png" width="50" height="50">
</a> <!-- links to home page -->
<li class="nav-item py-3">
<a class="nav-link active" data-bs-toggle="pill" href="#" onclick="return show('homePage','teamPage');">Home</a>
</li>
<li class="nav-item py-3" href="#teamPage">
<a class="nav-link" data-bs-toggle="pill" onclick="return show('teamPage','homePage');">Teams</a>
</li>
</div>
<h4 class="league-name fw-bold">RMWLL</h4>
</ul>
</nav>
</div>
<div class="row">
<nav class="navbar ">
<ul class="nav w-100 nav-pills" role="tablist">
<a class="navbar-brand p-2 m-0 pe-5" href="#">
<img src="favicon_drawing.png" width="50" height="50">
</a> <!-- links to home page -->
<li class="nav-item py-3">
<a class="nav-link active" data-bs-toggle="pill" href="#" onclick="return show('homePage','teamPage');">Home</a>
</li>
<li class="nav-item py-3" href="#teamPage">
<a class="nav-link" data-bs-toggle="pill" onclick="return show('teamPage','homePage');">Teams</a>
</li>
<h4 class="league-name fw-bold">RMWLL</h4>
</ul>
</nav>
</div>
</div>
</div>
<div id="homePage">
<main class="container-fluid">
<h4 class="my-5 mainContent">Home Page</h4>
<p class="mainContent">"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati 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."</p>
<p class="mainContent">"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati 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."</p>
<p class="mainContent">"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati 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."</p>
</main>
</div> <!--teamPage-->
<div class="container-fluid hidden" id="teamPage">
<h4 class="my-5 teamContent">Team Page</h4>
<p class="teamContent">"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati 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."</p>
<p class="teamContent">"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati 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."</p>
<p class="teamContent">"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati 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."</p>
</div>
</div> <!--teamPage-->
</body>
</html>
'''

Left and Right is replaced with start and end, So ml-auto is now ms-auto
and mr-auto is now me-auto

Prevent active accordion item from closing on click

i'm working on a design for a site, but i'm super new to any kind of coding, so there's a lot that i don't know the answer to (and haven't been able to find yet).
currently, i'd like to know if it's possible, with the code i currently have, to prevent the active accordion item/panel from closing when the header is clicked.
here's the relevant part of my current code:
var acc = document.getElementsByClassName("accordionHeader");
var panel = document.getElementsByClassName('accPanel');
for (var i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
var setClasses = !this.classList.contains('open');
setClass(acc, 'open', 'remove');
setClass(panel, 'open', 'remove');
if (setClasses) {
this.classList.toggle("open");
this.nextElementSibling.classList.toggle("open");
}
}
}
function setClass(els, className, fnName) {
for (var i = 0; i < els.length; i++) {
els[i].classList[fnName](className);
}
}
document.getElementById("defaultOpen").click();
.accordionHeader {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
text-align: left;
border: none;
outline: none;
transition: 0.4s;
}
.accPanel {
padding: 0 18px;
background-color: white;
display: none;
overflow: hidden;
transition: max-height 0.5s ease-out;
}
.open {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<title>polka time</title>
</head>
<body>
<div>
<button class="accordionHeader" id="defaultOpen">section 1</button>
<div class="accPanel">
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati 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.
</div>
<button class="accordionHeader">section 2</button>
<div class="accPanel">
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati 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.
</div>
<button class="accordionHeader">section 3</button>
<div class="accPanel">
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati 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.
</div>
</div>
<script src="character page js.js" type="text/javascript"></script>
</body>
</html>
if at all possible i'd like to not change too much about the code, since i only just got it working (more or less). i'm sure my code's a total mess though since i've mainly been copying off tutorials the whole time.
also if there's a good way to get the accordion to animate that would be a bonus.

You can add another isOpen statecheck to the function like in the snippet below so that you don't remove the open class when the element is opened.
Full code below.
// change
setClass(acc, 'open', 'remove');
setClass(panel, 'open', 'remove');
// to
var isOpen = !!this.classList.contains('open');
if (!isOpen){
setClass(acc, 'open', 'remove');
setClass(panel, 'open', 'remove');
}
var acc = document.getElementsByClassName("accordionHeader");
var panel = document.getElementsByClassName('accPanel');
for (var i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
var setClasses = !this.classList.contains('open');
var isOpen = !!this.classList.contains('open');
if (!isOpen){
setClass(acc, 'open', 'remove');
setClass(panel, 'open', 'remove');
}
if (setClasses) {
this.classList.toggle("open");
this.nextElementSibling.classList.toggle("open");
}
}
}
function setClass(els, className, fnName) {
for (var i = 0; i < els.length; i++) {
els[i].classList[fnName](className);
}
}
document.getElementById("defaultOpen").click();
.accordionHeader {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
text-align: left;
border: none;
outline: none;
transition: 0.4s;
}
.accPanel {
padding: 0 18px;
background-color: white;
display: none;
overflow: hidden;
transition: max-height 0.5s ease-out;
}
.open {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<title>polka time</title>
</head>
<body>
<div>
<button class="accordionHeader" id="defaultOpen">section 1</button>
<div class="accPanel">
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati 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.
</div>
<button class="accordionHeader">section 2</button>
<div class="accPanel">
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati 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.
</div>
<button class="accordionHeader">section 3</button>
<div class="accPanel">
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati 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.
</div>
</div>
<script src="character page js.js" type="text/javascript"></script>
</body>
</html>

This solution will prevent the active header from closing when a new header is clicked.
var acc = document.getElementsByClassName("accordionHeader");
var panel = document.getElementsByClassName('accPanel');
for (var i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
var setClasses = !this.classList.contains('open');
var thisPanel = this.nextElementSibling;
setClass(this, 'open', 'remove');
setClass(thisPanel, 'open', 'remove');
if (setClasses) {
this.classList.toggle("open");
this.nextElementSibling.classList.toggle("open");
}
}
}
function setClass(el, className, fnName) {
el.classList[fnName](className);
}
document.getElementById("defaultOpen").click();
.accordionHeader {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
text-align: left;
border: none;
outline: none;
transition: 0.4s;
}
.accPanel {
padding: 0 18px;
background-color: white;
display: none;
overflow: hidden;
transition: max-height 0.5s ease-out;
}
.open {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<title>polka time</title>
</head>
<body>
<div>
<button class="accordionHeader" id="defaultOpen">section 1</button>
<div class="accPanel">
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati 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.
</div>
<button class="accordionHeader">section 2</button>
<div class="accPanel">
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati 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.
</div>
<button class="accordionHeader">section 3</button>
<div class="accPanel">
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati 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.
</div>
</div>
<script src="character page js.js" type="text/javascript"></script>
</body>
</html>

how to position content to move to top of active accordion when opened so user doesn't have to scroll

Cannot get the content to open at the top of the active accordion when opened. I am trying to improve ux and ensure that the user doesnt have to scroll to view content. As it stands the content is out of view when accordion is opened, and the user has to either scroll up or down depending on which is clicked. Ideally, i would like to ensure that the content for the active window is always presented at the top.
$(document).ready(function() {
$('.accordian-content').hide();
$('.accordian-title').click(function() {
const flag = $(this).find('.accordian-title-icon').hasClass('accordian-title-icon-open');
$('.accordian-title-icon').removeClass('accordian-title-icon-open');
$('.accordian-content').not($(this).next('.accordian-content')).slideUp();
$(this).next('.accordian-content').slideToggle();
if(!flag) {
$(this).find('.accordian-title-icon').addClass('accordian-title-icon-open')
} else {
$(this).find('.accordian-title-icon').removeClass('accordian-title-icon-open')
}
});
});
.accordian {
display: block;
width: 100%;
margin-top: 1em;
margin-bottom: 1em;
border-top: 1px solid black;
border-right: 1px solid black;
border-left: 1px solid black;
}
.accordian .accordian-item .accordian-title {
font-size: 22px;
border-bottom: 1px solid black;
padding: 0.5em 1em;
cursor: pointer;
font-weight: 700;
}
.accordian .accordian-item .accordian-title .accordian-title-icon {
background: lightblue;
border-radius: 50%;
width: 25px;
height: 25px;
display: inline-block;
text-align: center;
color: white;
font-weight: 700;
margin-right: 1em;
padding: 0 0 0 1px;
position: relative;
vertical-align: top;
}
.accordian .accordian-item .accordian-title .accordian-title-icon:before {
content: '+';
display: block;
position: absolute;
text-align: center;
width: 100%;
margin: -1px;
}
.accordian .accordian-item .accordian-title .accordian-title-icon-open:before {
display: none;
}
.accordian .accordian-item .accordian-title .accordian-title-icon-open:after {
content: '-';
margin-top: -2px;
margin-left: -1px;
display: block;
position: absolute;
text-align: center;
width: 100%;
}
.accordian .accordian-item:first-of-type .accordian-title {
border-top: none;
}
.accordian .accordian-item .accordian-content {
display: none;
padding: 0.5em 1em;
border-bottom: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="accordian">
<a class="accordian-item">
<div class="accordian-title"><span class="accordian-title-icon"></span>Item One</div>
<div class="accordian-content">
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati 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.
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati 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.
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati 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.</p>
</div>
</a>
<a class="accordian-item">
<div class="accordian-title"><span class="accordian-title-icon"></span>Item Two</div>
<div class="accordian-content">
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati 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.
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati 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.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati 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.</p>
</div>
</a>
</div>

You can get the position of the accordion-item when this is collapsed and scroll to that position, something like:
var self = $(this);
$(this).next('.accordian-content').slideToggle('slow', function(){
var position = self.offset();
$('body').animate({scrollTop: position.top }, 500, 'swing');
});
this must be done when the slide has ended up.
here idea working: https://jsfiddle.net/mvrkb1ba/4/

Wait for toggle animation to finish, than Scroll to the current HTMLelement using .animate() with scrollTop attribute.
See below working fiddle :
$(document).ready(function() {
$('.accordian-content').hide();
$('.accordian-title').click(function() {
const flag = $(this).find('.accordian-title-icon').hasClass('accordian-title-icon-open');
$('.accordian-title-icon').removeClass('accordian-title-icon-open');
$('.accordian-content').not($(this).next('.accordian-content')).slideUp();
$(this).next('.accordian-content').slideToggle();
if(!flag) {
$(this).find('.accordian-title-icon').addClass('accordian-title-icon-open')
//Add this code
thisE = $(this)
setTimeout(function(){
$('html, body').animate({
scrollTop: thisE.offset().top//scrollPos
}, 200);//Scroll Animation Duration
},450)//Wait for toggle animation to finish
} else {
$(this).find('.accordian-title-icon').removeClass('accordian-title-icon-open')
}
});
});
.accordian {
display: block;
width: 100%;
margin-top: 1em;
margin-bottom: 1em;
border-top: 1px solid black;
border-right: 1px solid black;
border-left: 1px solid black;
}
.accordian .accordian-item .accordian-title {
font-size: 22px;
border-bottom: 1px solid black;
padding: 0.5em 1em;
cursor: pointer;
font-weight: 700;
}
.accordian .accordian-item .accordian-title .accordian-title-icon {
background: lightblue;
border-radius: 50%;
width: 25px;
height: 25px;
display: inline-block;
text-align: center;
color: white;
font-weight: 700;
margin-right: 1em;
padding: 0 0 0 1px;
position: relative;
vertical-align: top;
}
.accordian .accordian-item .accordian-title .accordian-title-icon:before {
content: '+';
display: block;
position: absolute;
text-align: center;
width: 100%;
margin: -1px;
}
.accordian .accordian-item .accordian-title .accordian-title-icon-open:before {
display: none;
}
.accordian .accordian-item .accordian-title .accordian-title-icon-open:after {
content: '-';
margin-top: -2px;
margin-left: -1px;
display: block;
position: absolute;
text-align: center;
width: 100%;
}
.accordian .accordian-item:first-of-type .accordian-title {
border-top: none;
}
.accordian .accordian-item .accordian-content {
display: none;
padding: 0.5em 1em;
border-bottom: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="accordian">
<a class="accordian-item">
<div class="accordian-title"><span class="accordian-title-icon"></span>Item One</div>
<div class="accordian-content">
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati 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.
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati 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.
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati 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.</p>
</div>
</a>
<a class="accordian-item">
<div class="accordian-title"><span class="accordian-title-icon"></span>Item Two</div>
<div class="accordian-content">
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati 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.
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati 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.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati 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.</p>
</div>
</a>
<a class="accordian-item">
<div class="accordian-title"><span class="accordian-title-icon"></span>Item One</div>
<div class="accordian-content">
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati 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.
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati 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.
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati 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.</p>
</div>
</a>
<a class="accordian-item">
<div class="accordian-title"><span class="accordian-title-icon"></span>Item Two</div>
<div class="accordian-content">
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati 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.
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati 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.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati 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.</p>
</div>
</a>
<a class="accordian-item">
<div class="accordian-title"><span class="accordian-title-icon"></span>Item One</div>
<div class="accordian-content">
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati 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.
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati 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.
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati 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.</p>
</div>
</a>
<a class="accordian-item">
<div class="accordian-title"><span class="accordian-title-icon"></span>Item Two</div>
<div class="accordian-content">
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati 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.
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati 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.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati 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.</p>
</div>
</a>
<a class="accordian-item">
<div class="accordian-title"><span class="accordian-title-icon"></span>Item One</div>
<div class="accordian-content">
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati 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.
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati 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.
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati 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.</p>
</div>
</a>
<a class="accordian-item">
<div class="accordian-title"><span class="accordian-title-icon"></span>Item Two</div>
<div class="accordian-content">
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati 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.
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati 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.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati 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.</p>
</div>
</a>
</div>

Develop Reference

JavaScript is the programming language of the Web.

Javascript fixed menu scroll glitch - javascript

Related

How to make a moving block (part of the site) and fix

Calling e.preventDefault() Stops TouchEvents from Scrolling Page, but any Additional Click Listeners Don't Fire

Nav Bar Pills to the Left and Text to the Right Bootstrap5

Prevent active accordion item from closing on click

how to position content to move to top of active accordion when opened so user doesn't have to scroll

Categories

Resources