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

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

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

Related

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>

Disable "close" button until modal view PDF is scrolled down

I'm using bootstraps modal view pop-up to display a PDF for my Terms of Use. I'm wondering if there is a way to disable the "close" button which is on the bottom of my modal view, until the user has scrolled to the bottom of the PDF. Currently the close button can be pressed anytime.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>DisplayPDF</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.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>
</head>
<body>
<div class="container">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<embed src="Terms of Use.pdf"
frameborder="0" width="100%" height="400px">
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

I've actually tried to recreate your issue using a simple div. Here is an example.
By default i've added the disabled attribute to the button and after scrolling to the bottom i've just removed that.
Here is the js_bin_link
const btn = document.querySelector('.accept-btn');
const wrapper = document.querySelector('.wrapper');
wrapper.addEventListener('scroll', (e) => {
if(wrapper.scrollTop === wrapper.scrollHeight - wrapper.offsetHeight) {
btn.removeAttribute('disabled');
}
})
.wrapper {
overflow-y: scroll;
max-height: 200px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>DisplayPDF</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.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>
</head>
<body>
<div class="container">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<!-- <embed src="http://keiba-kinki.jp/pdf/0510_11.pdf?#zoom=85&scrollbar=0&toolbar=0&navpanes=0" frameborder="0" width="100%" height="400px"></embed> -->
<div class="wrapper"><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates odio saepe sed esse, illum tempore, voluptatibus, quisquam incidunt nemo deserunt quasi quos sunt in laborum officiis ipsum dolor, fugiat. Doloribus.</span>
<span>Laborum placeat soluta aliquam sit laboriosam dolorem quis a impedit quos voluptas deleniti rerum, commodi numquam in ducimus ut voluptate modi laudantium! Tempore molestiae a cumque at odit dolores libero.</span>
<span>Error incidunt earum, sint aspernatur quisquam. Saepe, similique, voluptatibus! Unde est commodi placeat deserunt, expedita nemo. Placeat rem ipsam, minima aliquid rerum voluptatem neque maxime sed? Corporis autem, pariatur officia!</span>
<span>Beatae suscipit eligendi pariatur a labore quas nostrum blanditiis maiores nesciunt, repudiandae quo excepturi fugiat qui provident nisi. Quia saepe nemo, sapiente. Tenetur ipsa voluptate error, velit itaque fuga harum.</span>
<span>Fuga, nulla, repellendus! Sed explicabo a, ipsa consequuntur incidunt iusto neque nisi! Quo soluta eius officia error suscipit distinctio fugiat quaerat, consequatur doloribus perferendis, deleniti, nostrum vel repudiandae fuga! Ea!</span>
<span>Soluta ab consequuntur culpa magnam doloribus tenetur iste at error debitis eius saepe veniam mollitia odit dignissimos veritatis id expedita accusantium qui reprehenderit fugit itaque commodi ea temporibus, accusamus! A!</span>
<span>Quas quam voluptate dolorem eos voluptas odio, inventore esse nobis, deleniti ipsam iusto quia reprehenderit repellat perspiciatis, natus animi tenetur non temporibus porro dolores quasi illo. Nesciunt ab, cum sapiente.</span>
<span>Animi, possimus consequuntur nihil eius voluptate ullam id corrupti, tempore aliquid ex aspernatur voluptatibus dolorem optio nobis laboriosam deserunt quas perferendis, sequi sunt assumenda cupiditate suscipit, architecto magni quae. Dignissimos.</span>
<span>Iure ducimus debitis et minus? Quae, aut! Esse quia doloribus aspernatur ex, debitis reprehenderit eaque asperiores, ratione quos explicabo ab tempore eligendi, optio error adipisci neque rem nihil. Amet, exercitationem!</span>
<span>Nesciunt aliquid cupiditate impedit, aspernatur assumenda rem nemo voluptatum tempora cum asperiores. Temporibus dignissimos aspernatur porro illum. Placeat dolore ratione nobis, veniam error asperiores eum a! Corporis a rem ad.</span>
<span>Nemo mollitia vitae quis, nesciunt similique iste aspernatur perspiciatis error ipsum facere eum impedit vel quod vero dolorem cumque officiis deserunt, sed provident repudiandae asperiores. Voluptate, aspernatur! Aliquam, ex facilis!</span>
<span>Earum, quos dolores possimus aspernatur sunt qui, corporis blanditiis voluptatibus, odio quasi perspiciatis architecto tempora odit iusto. Nam nihil, eaque aut autem vero tempore neque assumenda reprehenderit aliquid a ipsam!</span>
<span>Eius minus maiores, id reiciendis consectetur commodi, cum qui alias, ipsam laborum illum, asperiores nihil eum fuga voluptatum velit corporis. Doloribus at quae, vero corporis. At magni dignissimos incidunt id!</span>
<span>Iure saepe praesentium laudantium enim perferendis beatae, nesciunt, obcaecati, unde repudiandae aut tenetur et, eaque a. Aspernatur illum, repellendus labore temporibus qui quia explicabo beatae, cupiditate odio, architecto culpa placeat!</span>
<span>Nostrum quo eligendi ad voluptates veritatis perferendis. Illum maxime, nesciunt aliquid quidem, ipsum vero fugiat earum alias dolorum architecto tempore. Accusamus nisi esse dolores voluptatibus, ipsum, iste reiciendis ipsam eligendi.</span>
<span>Veritatis doloremque, exercitationem quae aspernatur id nemo sit quas. Consequuntur, quod. Provident repellat rem, quo doloribus, similique quis tempore iure quasi, voluptatibus perspiciatis sunt nobis, aspernatur soluta odit quibusdam. Laboriosam!</span>
<span>Rem dolorem enim porro fugit, dignissimos nulla magni, sint tempora nemo recusandae vel animi veritatis veniam aliquid culpa repellat aperiam, adipisci atque hic consequatur! Debitis voluptates, quia. Rerum, illo vitae.</span>
<span>Natus odit aliquid voluptates ullam, quia quod quisquam saepe assumenda molestias, est dicta culpa officiis doloremque libero nam reiciendis corporis qui laudantium illo suscipit unde asperiores. Corporis dolores in, dolorum!</span>
<span>Iure eligendi dolor porro. Dignissimos, delectus doloribus, ullam architecto id ab quos perspiciatis tenetur eos omnis aliquam mollitia quia iusto quae tempora beatae, placeat autem blanditiis, quisquam! Minus, saepe, aspernatur!</span>
<span>Blanditiis, voluptates delectus reprehenderit odio quibusdam ut obcaecati, officia fugit minima! Animi eos quae eius, vitae, voluptate illum commodi porro debitis! Corrupti nostrum eaque, odio. Quasi perspiciatis quibusdam similique? Tempore!</span>
<span>Laudantium eius repellendus, vel cupiditate a, fugit blanditiis deleniti maiores sunt, est explicabo dolor sed culpa nemo eligendi incidunt cum aliquam dicta. Aperiam sunt similique deleniti quibusdam aliquam veniam officiis!</span>
<span>Tempora perferendis quo labore quis vel porro eligendi, accusamus in pariatur ullam tempore ad magni sequi et. Fugiat, eum? Harum fugiat cupiditate cum nesciunt nemo saepe laborum ipsa perferendis voluptatum!</span>
<span>At excepturi laborum modi nisi voluptatum tenetur labore quam dolore illum magni. Autem commodi, fugiat maiores velit quasi odit est. Obcaecati possimus id cumque assumenda fuga repellat dolores quia cupiditate.</span>
<span>Dolor minus soluta deserunt eaque, reiciendis enim, assumenda fugit laborum deleniti sed tenetur qui adipisci hic consectetur aliquid possimus temporibus cumque nihil fugiat, dolorem! Animi, ex perspiciatis quae quo veritatis.</span>
<span>Eaque provident esse architecto quis. Corporis necessitatibus eveniet, a praesentium illo ex exercitationem dolores esse, aspernatur sint nemo unde, facere excepturi iure repellendus delectus est! Beatae aspernatur, quis enim repellendus.</span>
<span>Atque tempore vel, hic, impedit odit consequatur ea eveniet. Hic doloremque, sapiente magni, accusantium qui quibusdam sed nulla quas enim modi quisquam laboriosam, beatae rem aliquam esse delectus molestiae dignissimos.</span>
<span>Doloremque eius id, totam nesciunt. Laudantium molestiae quasi nihil numquam quaerat fugit rerum sequi incidunt iure quibusdam, magni voluptatibus ea, perferendis officia tenetur autem at? Nobis, nesciunt. Mollitia quo, porro.</span>
<span>Quos quis dignissimos dolorem nihil ipsum facilis porro nulla nostrum molestiae, mollitia doloremque deserunt sunt labore magni, ab modi qui eius vel nisi! Accusamus veniam, odio tenetur. Libero, eligendi, quod?</span>
<span>Minus perspiciatis iste, ipsa odio neque maiores incidunt ducimus, quis et fugiat, officiis enim alias ipsam vel doloribus soluta quam mollitia. Amet, impedit cum illum quidem, nihil dolorem ratione ea!</span>
<span>Minima unde debitis qui corrupti, neque atque accusantium id porro dignissimos eligendi. Est iusto sed minus quibusdam similique et fugiat, vitae tempore. Accusantium a asperiores quaerat veniam incidunt debitis, facilis?</span>
<span>Eius voluptate odit beatae, earum eos ipsa, laudantium esse minus hic rem dolores quasi harum, quibusdam sit error nam, ea facilis sunt cupiditate qui voluptatem quidem possimus pariatur deleniti? Quaerat.</span>
<span>Nihil quidem consectetur, illum praesentium molestias minima eligendi id ipsam voluptatum cumque? Numquam dolorem, praesentium odio velit accusantium at error non blanditiis quo, consequuntur, dolor dignissimos vel voluptas inventore iusto!</span>
<span>Nesciunt ipsam cum magnam alias est, nemo doloremque sunt sapiente et! Unde deserunt itaque consequuntur architecto, debitis autem rerum, inventore aspernatur ea, perspiciatis ad quas tempore soluta, quo aut laboriosam.</span>
<span>Quia quo officia, nobis veritatis laborum magni dolor libero minus, voluptatem ut! Dolorem, vel possimus adipisci tenetur inventore, minima tempora neque officiis reiciendis nihil reprehenderit ab deserunt ipsam temporibus ipsa.</span>
<span>Dolore labore inventore consequuntur reiciendis doloribus nostrum facere sunt maiores culpa quasi, odit dignissimos saepe incidunt provident! Totam dignissimos, dolorem animi aspernatur nesciunt commodi! Autem quis repudiandae ipsa amet asperiores.</span>
<span>Harum laborum quisquam unde enim commodi temporibus corrupti nam nisi odit labore reiciendis impedit eos dolores eveniet excepturi asperiores sunt vel praesentium delectus, deleniti maiores deserunt! Ut corrupti molestias aliquid.</span>
<span>Natus vitae, quis perspiciatis in eos voluptate vel tempore molestiae, veniam, voluptas, repellendus debitis assumenda? Esse illo distinctio nobis nihil inventore, doloremque fuga adipisci itaque veritatis, dolor veniam. Quibusdam, omnis!</span>
<span>Explicabo tempora ipsum dolorum necessitatibus quasi doloribus blanditiis fugit tenetur, debitis laudantium quas odio commodi molestiae autem consequatur velit culpa voluptas corporis cupiditate architecto deleniti esse saepe optio id. Eum.</span>
<span>Atque magnam similique, voluptate neque quod iusto. Nam delectus, illum esse repellendus nulla. Delectus consequuntur eius quas officia ipsam unde debitis alias tempore ullam accusamus fugiat, ea tempora ducimus amet.</span>
<span>Dicta voluptatum vero, eaque fugiat mollitia dolore deserunt doloremque commodi inventore, esse consequuntur earum dolores officia tempora aspernatur et, quisquam repudiandae sint explicabo perferendis? Maiores, voluptates, officia. Accusamus, deleniti, excepturi.</span>
<span>Assumenda ea, excepturi eum aliquid. Corrupti ullam illum nulla consequatur maxime nisi dolorum saepe veritatis accusamus, magni ab laborum nesciunt quis reiciendis a tempora. Quos accusantium cum excepturi, eaque mollitia?</span>
<span>Quaerat amet dolorum distinctio, architecto quis voluptatem enim quo laudantium ipsa suscipit at, quae porro laboriosam voluptates veritatis unde magni laborum reprehenderit, dolor, nobis perferendis cum! Deleniti possimus, voluptates nihil?</span>
<span>Rem, eveniet, cupiditate. Quisquam nesciunt soluta perspiciatis quaerat mollitia possimus iure voluptatibus accusantium hic officiis quasi aut ea, iusto neque architecto temporibus qui maiores ducimus aliquam blanditiis dignissimos minima odit.</span>
<span>Ducimus facere animi, voluptatem quo, iure modi natus harum maxime distinctio fugit consequuntur accusamus sequi ex eos enim praesentium, debitis accusantium deleniti tenetur quis, culpa laboriosam soluta dolorum! Est, libero.</span>
<span>Ad voluptas odit, accusantium quisquam earum mollitia, perspiciatis temporibus laborum aperiam consequatur autem sequi dolores id itaque vel laboriosam at, fuga similique sit eum nemo deleniti nulla. Ex, iste, aperiam!</span>
<span>Debitis obcaecati et iste, nesciunt laborum beatae consequatur explicabo libero voluptatem porro fuga quis, labore inventore nemo odio ipsa illum. Voluptatem provident velit nam delectus architecto nulla iste aliquam necessitatibus.</span>
<span>Beatae repellat, voluptatem recusandae. Earum ad placeat minima recusandae. Dicta autem rem, rerum, vitae atque placeat quibusdam expedita laboriosam asperiores quod unde ipsa voluptatum cum consectetur voluptas neque voluptates quae.</span>
<span>Vero neque sint, quibusdam ad assumenda. Dolorum eligendi explicabo placeat a esse earum unde pariatur exercitationem sit numquam soluta blanditiis quam, optio neque recusandae beatae dolorem, perferendis dignissimos tempora doloribus.</span>
<span>Enim sed, iure repellendus sequi esse placeat quo quae voluptas optio dolores maiores perferendis fugiat porro ipsam asperiores, odit possimus? Inventore voluptas amet, omnis quod sit explicabo corporis tempore, quos?</span>
<span>Amet reiciendis veniam sapiente ducimus minus odit magni culpa aspernatur numquam, fuga dolorum velit cum deleniti delectus impedit natus quidem cumque et. Expedita tempore et, unde impedit alias? Deleniti, nihil.</span>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default accept-btn" data-dismiss="modal" disabled>Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

My social media panels are not working properly

I want to ask about javascript. I want to create a social media share floating panel. I have made the code like below, but the panel is not working properly.
When the panel is closed, it displays the share icon. but there, it displays the close icon. Previously, this code was intended for panels that were already open first. But I want the panel not to open, but closed. So I removed the open class in <div class="panel-socmed">. But what happened, it became messy. And i want when scrolling at the top, panel doesnt open.
Anyone can help me?
function toggleMenu() {
if ($(".panel-socmed").hasClass("open")) {
openMenu();
} else {
closeMenu();
}
}
function openMenu() {
$(".panel-socmed").removeClass("open");
$("#closeShare").find(".fa-times").hide();
$("#closeShare").find(".fa-share-alt").show();
}
function closeMenu() {
$(".panel-socmed").addClass("open");
$("#closeShare").find(".fa-times").show();
$("#closeShare").find(".fa-share-alt").hide();
}
$(document).ready(function() {
$('#closeShare').click(function() {
toggleMenu();
});
$(window).scroll(function() {
if ($(this).scrollTop() > 0) {
openMenu();
} else{
closeMenu();
}
if ($("body").height() <= ($(window).height() + $(window).scrollTop())){
$("#toTop").css("display","block");
} else {
$("#toTop").css("display","none");
}
});
});
body{
background-color:#c4c4c4;
}
#floatingPanel{
position: fixed;
z-index: 9;
bottom: 0;
right: 3%;
text-align: center;
}
.instagram{
background-color: #BC2A95;
}
.facebook{
background-color:#3F7BDB;
}
.twitter{
background-color: #5EB7F8;
}
.youtube{
background-color: #D84B4B;
}
.linkedin{
background-color: #3A66B9;
}
.instagram, .facebook, .twitter, .youtube, .linkedin {
display: flex;
align-items: center;
justify-content: center;
color: #fff;
width:35px;
height:35px;
border-radius: 50%;
margin: 5px 0;
font-size: 13px;
text-decoration: none !important;
outline: none;
}
#socialMedia,#closeShare,#chat,#toTop{
margin: 15px 0;
}
#closeShare{
cursor: pointer;
display: flex;
align-items:center;
justify-content:center;
background:red;
width:40px;
height:40px;
border-radius:50%;
}
#closeShare .fa-share-alt{
display: none;
}
#toTop{
background-color:blue;
color:#fff;
width:40px;
height:40px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
}
.panel-socmed {
display:none;
}
.panel-socmed.open{
display: flex;
flex-direction: column;
background-color: #fff;
padding: 20px 15px;
border-radius: 35px;
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha512-bnIvzh6FU75ZKxp0GXLH9bewza/OIw6dLVh9ICg0gogclmYGguQJWl8U30WpbsGTqbIiAwxTsbe76DErLq5EDQ==" crossorigin="anonymous"></script>
<div id="floatingPanel">
<div class="panel-socmed">
<a href="#" class="instagram">
<i class="fab fa-instagram"></i>
</a>
<a href="#" class="facebook">
<i class="fab fa-facebook-f"></i>
</a>
<a href="#" class="twitter">
<i class="fab fa-twitter"></i>
</a>
<a href="#" class="youtube">
<i class="fab fa-youtube"></i>
</a>
<a href="#" class="linkedin">
<i class="fab fa-linkedin-in"></i>
</a>
</div>
<div id="closeShare">
<!-- <img src="assets/img/component/icon/share.svg" alt="" class="img-fluid share-panel">
<img src="assets/img/component/icon/close.svg" alt="" class="img-fluid close-panel"> -->
<i class="fas fa-times"></i>
<i class="fas fa-share-alt"></i>
</div>
<div id="toTop">
<i class="fas fa-chevron-up"></i>
</div>
</div>
<div class="content">
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Totam iste cupiditate, asperiores ea quis enim ipsum, explicabo laboriosam porro harum recusandae! Eveniet atque molestias qui unde facere alias sed corporis veniam maxime deleniti sit vero aperiam quisquam, vitae, enim ad ratione, pariatur esse ex labore error? Iusto deleniti similique laboriosam harum veritatis repudiandae officia reprehenderit reiciendis illum molestiae maiores cumque vitae molestias at cum, facere nemo. Incidunt ratione repellendus deserunt facilis, tempore consequatur doloremque quo minus inventore error voluptates similique numquam? Autem, quam dolore minima consequuntur dolorem vitae animi nostrum. Voluptates nesciunt dolorem perspiciatis dolore pariatur totam modi at officiis amet quod optio accusantium, eius vel ad? Nulla laboriosam, minus numquam molestiae blanditiis dicta sed sint incidunt ducimus et veritatis excepturi nostrum ipsam optio rerum, reiciendis eaque commodi, fuga autem harum? Neque minus nemo pariatur. Recusandae voluptatum quae, vitae, voluptate impedit dicta minima natus ut exercitationem veniam laboriosam perferendis voluptas, aspernatur quidem culpa voluptatem quis? Eligendi, quia assumenda. Incidunt repudiandae deserunt placeat aliquam, cumque fugiat delectus voluptatem nobis amet quas ab aperiam dolore tempora ducimus, neque aliquid perferendis adipisci facilis? Nam dolorum ex iusto ab praesentium molestias et, maxime doloribus necessitatibus consequatur aut, eveniet, in facilis nihil deserunt adipisci. Fugiat dolorem recusandae reprehenderit sint suscipit vel cupiditate veniam corrupti accusamus, asperiores tempora laboriosam quam. Inventore cumque nam consequuntur aliquam sapiente soluta possimus aut laudantium, fuga cum neque in mollitia iure dolor at explicabo ea et non culpa! Temporibus ab harum nam quasi quis repellat odio maxime reiciendis porro ad quia sapiente modi eius debitis, rerum odit numquam. Laboriosam magnam neque quibusdam, earum dolores aperiam corporis eum deserunt necessitatibus error veniam labore quasi saepe quaerat ea unde totam placeat beatae blanditiis repellat autem cupiditate quod quos at. Vitae voluptate ratione id ab cumque illo cum totam expedita, perspiciatis nam laudantium omnis dolorem, aliquid fugiat assumenda, possimus doloribus? Ipsam vitae eligendi velit ut, cupiditate nisi recusandae vel dolore, nobis odit veniam eveniet earum perspiciatis dolorum esse corrupti beatae quos provident officia qui, cum modi non. Quaerat quos dolorum totam officiis nostrum omnis blanditiis harum cum eligendi explicabo quisquam similique enim consequatur molestias cupiditate impedit, aperiam nesciunt dolore soluta odio voluptates fugiat vitae tempore. Odio ipsum quasi qui at corrupti reprehenderit nostrum alias, in, neque rem corporis dolore consequuntur ut. Doloribus nisi voluptas delectus quis hic, minima at consequuntur qui nostrum suscipit alias. Alias explicabo voluptates fuga repellat esse cum. Ea blanditiis perspiciatis excepturi molestias fugiat tempora, maxime, dolor quas magni deserunt, aliquam enim quasi omnis repudiandae fuga voluptates ad sit alias libero veniam. Rem, similique labore, atque sequi doloribus magnam at enim veniam eius nostrum eligendi! Fugit officia asperiores et, dolorum aspernatur possimus, nobis sequi reiciendis unde fuga nemo quam, minima eos neque aperiam aliquid. Tempora tempore neque, et alias ipsum ratione adipisci omnis nobis? Officiis blanditiis libero eaque quam assumenda eos ipsum fuga aut obcaecati similique dolor sapiente nisi, nam odio? Deleniti velit iste nam provident maiores laboriosam accusantium molestiae, unde neque eos atque tempore sequi et veniam? Inventore reiciendis error eum architecto est aut, tenetur dignissimos libero repudiandae modi accusamus ducimus culpa odio laborum itaque quod in atque eligendi. Animi, debitis in similique culpa obcaecati sed illo doloribus quasi numquam aut porro hic pariatur alias iusto nesciunt tempore a voluptate id, non ad, cum et. Qui praesentium cupiditate doloremque possimus sed porro deserunt aliquam quas. Ad, eius assumenda dolorum labore in, nemo odit odio suscipit dolorem nulla, dicta atque. Quia, repellat quod. Cum optio aspernatur magnam ducimus dolorem earum suscipit eos, rem sapiente, ipsa ut inventore quidem quae quis modi expedita perferendis tempore ullam blanditiis aperiam saepe error! Quibusdam, voluptate accusantium harum itaque fuga doloribus maiores iusto sunt beatae sapiente distinctio commodi in quam recusandae dolores nisi placeat? Veritatis optio dolorem distinctio. Libero eligendi vero molestiae vel ducimus perferendis quo sunt aliquid fugiat obcaecati quas incidunt enim expedita doloribus accusantium a necessitatibus eum voluptatem tenetur nemo delectus, laboriosam similique perspiciatis earum! Natus voluptatem quae maiores qui aliquam voluptatibus dolore, architecto, saepe libero eveniet fuga atque magnam harum ipsam numquam quibusdam. Aut odit non cupiditate modi, nihil quis eos quae rem, corrupti fuga fugit suscipit atque vel tempore, voluptate sint? Asperiores consequuntur, soluta cum laudantium vero ex. Voluptatum ipsum accusamus dolorem illo molestiae perspiciatis deleniti itaque ipsam optio, eius voluptates doloremque dolor, placeat labore molestias est at voluptatibus? Voluptatum accusantium consequatur nulla labore asperiores! Nulla aperiam, laudantium architecto amet, eligendi quos porro accusamus sit voluptatibus libero quidem? Doloremque nemo modi veniam nisi. Magnam laboriosam, voluptate, recusandae libero molestias quia beatae expedita fugit culpa ab velit! Aperiam quam, accusantium doloremque minus, incidunt odit dolorum voluptate laboriosam laudantium, possimus obcaecati delectus quae voluptatem! Suscipit provident recusandae non, reiciendis quam pariatur obcaecati. Ab quidem perferendis laudantium vel dolore repellendus corporis commodi ex veniam, molestias delectus ipsum non sed dolores dolorum quasi? Dignissimos aut iste ratione nisi itaque unde debitis incidunt fugiat voluptatum autem ipsa sapiente explicabo eius officiis, aspernatur totam dolorum dolores! Fuga alias quae facilis quam quis consequuntur omnis eligendi doloremque molestiae. Dignissimos, voluptate dolore! Tempora consequatur laudantium dignissimos modi. Voluptas adipisci similique non aut, repellat nisi quaerat illum dolores accusamus sequi labore dolorum dolorem fugit velit magni nobis reiciendis dignissimos soluta excepturi perspiciatis molestiae eius ea voluptates! Dolore modi aliquid dignissimos sunt, quaerat a quidem, pariatur quod corporis esse excepturi assumenda provident magnam vero voluptates accusamus, eligendi nam quae doloribus rem ad ipsa. Laboriosam maxime animi aliquam maiores tempore voluptatem, nulla consequuntur, ipsa quidem officia veritatis laudantium ad alias minima reiciendis totam et cum dolores facere minus magnam. Nostrum excepturi magnam dolorem quibusdam inventore qui non magni est doloribus molestias possimus, delectus vitae expedita perspiciatis voluptas. Obcaecati, enim voluptatum laboriosam vitae similique excepturi ab fugiat, quidem, dolores mollitia exercitationem nesciunt? Pariatur expedita architecto itaque possimus quisquam officiis modi earum qui eveniet aliquid illum vel, minima voluptate odit maiores at tempora saepe nisi numquam perferendis facilis fuga dicta sit omnis. Ipsum ipsam quibusdam, necessitatibus tempore quae sunt architecto aperiam eos dignissimos sed accusantium, assumenda corporis reprehenderit numquam quaerat excepturi dolore sequi, officiis nisi.
</p>
</div>

The problem is your #closeShare .fa-share-alt has display: none; so the close icon show at start. Just change:
#closeShare .fa-share-alt {
display: none;
}
To:
#closeShare .fa-times {
display: none;
}
Then it will work as expected.
function toggleMenu() {
if ($(".panel-socmed").hasClass("open")) {
openMenu();
} else {
closeMenu();
}
}
function openMenu() {
$(".panel-socmed").removeClass("open");
$("#closeShare").find(".fa-times").hide();
$("#closeShare").find(".fa-share-alt").show();
}
function closeMenu() {
$(".panel-socmed").addClass("open");
$("#closeShare").find(".fa-times").show();
$("#closeShare").find(".fa-share-alt").hide();
}
$(document).ready(function() {
$('#closeShare').click(function() {
toggleMenu();
});
$(window).scroll(function() {
if ($(this).scrollTop() > 0) {
openMenu();
} else{
closeMenu();
}
if ($("body").height() <= ($(window).height() + $(window).scrollTop())){
$("#toTop").css("display","block");
} else {
$("#toTop").css("display","none");
}
});
$(window).trigger('scroll');
});
body{
background-color:#c4c4c4;
}
#floatingPanel{
position: fixed;
z-index: 9;
bottom: 0;
right: 3%;
text-align: center;
}
.instagram{
background-color: #BC2A95;
}
.facebook{
background-color:#3F7BDB;
}
.twitter{
background-color: #5EB7F8;
}
.youtube{
background-color: #D84B4B;
}
.linkedin{
background-color: #3A66B9;
}
.instagram, .facebook, .twitter, .youtube, .linkedin {
display: flex;
align-items: center;
justify-content: center;
color: #fff;
width:35px;
height:35px;
border-radius: 50%;
margin: 5px 0;
font-size: 13px;
text-decoration: none !important;
outline: none;
}
#socialMedia,#closeShare,#chat,#toTop{
margin: 15px 0;
}
#closeShare{
cursor: pointer;
display: flex;
align-items:center;
justify-content:center;
background:red;
width:40px;
height:40px;
border-radius:50%;
}
#closeShare .fa-times {
display: none;
}
#toTop{
background-color:blue;
color:#fff;
width:40px;
height:40px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
}
.panel-socmed {
display:none;
}
.panel-socmed.open{
display: flex;
flex-direction: column;
background-color: #fff;
padding: 20px 15px;
border-radius: 35px;
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha512-bnIvzh6FU75ZKxp0GXLH9bewza/OIw6dLVh9ICg0gogclmYGguQJWl8U30WpbsGTqbIiAwxTsbe76DErLq5EDQ==" crossorigin="anonymous"></script>
<div id="floatingPanel">
<div class="panel-socmed">
<a href="#" class="instagram">
<i class="fab fa-instagram"></i>
</a>
<a href="#" class="facebook">
<i class="fab fa-facebook-f"></i>
</a>
<a href="#" class="twitter">
<i class="fab fa-twitter"></i>
</a>
<a href="#" class="youtube">
<i class="fab fa-youtube"></i>
</a>
<a href="#" class="linkedin">
<i class="fab fa-linkedin-in"></i>
</a>
</div>
<div id="closeShare">
<!-- <img src="assets/img/component/icon/share.svg" alt="" class="img-fluid share-panel">
<img src="assets/img/component/icon/close.svg" alt="" class="img-fluid close-panel"> -->
<i class="fas fa-times"></i>
<i class="fas fa-share-alt"></i>
</div>
<div id="toTop">
<i class="fas fa-chevron-up"></i>
</div>
</div>
<div class="content">
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Totam iste cupiditate, asperiores ea quis enim ipsum, explicabo laboriosam porro harum recusandae! Eveniet atque molestias qui unde facere alias sed corporis veniam maxime deleniti sit vero aperiam quisquam, vitae, enim ad ratione, pariatur esse ex labore error? Iusto deleniti similique laboriosam harum veritatis repudiandae officia reprehenderit reiciendis illum molestiae maiores cumque vitae molestias at cum, facere nemo. Incidunt ratione repellendus deserunt facilis, tempore consequatur doloremque quo minus inventore error voluptates similique numquam? Autem, quam dolore minima consequuntur dolorem vitae animi nostrum. Voluptates nesciunt dolorem perspiciatis dolore pariatur totam modi at officiis amet quod optio accusantium, eius vel ad? Nulla laboriosam, minus numquam molestiae blanditiis dicta sed sint incidunt ducimus et veritatis excepturi nostrum ipsam optio rerum, reiciendis eaque commodi, fuga autem harum? Neque minus nemo pariatur. Recusandae voluptatum quae, vitae, voluptate impedit dicta minima natus ut exercitationem veniam laboriosam perferendis voluptas, aspernatur quidem culpa voluptatem quis? Eligendi, quia assumenda. Incidunt repudiandae deserunt placeat aliquam, cumque fugiat delectus voluptatem nobis amet quas ab aperiam dolore tempora ducimus, neque aliquid perferendis adipisci facilis? Nam dolorum ex iusto ab praesentium molestias et, maxime doloribus necessitatibus consequatur aut, eveniet, in facilis nihil deserunt adipisci. Fugiat dolorem recusandae reprehenderit sint suscipit vel cupiditate veniam corrupti accusamus, asperiores tempora laboriosam quam. Inventore cumque nam consequuntur aliquam sapiente soluta possimus aut laudantium, fuga cum neque in mollitia iure dolor at explicabo ea et non culpa! Temporibus ab harum nam quasi quis repellat odio maxime reiciendis porro ad quia sapiente modi eius debitis, rerum odit numquam. Laboriosam magnam neque quibusdam, earum dolores aperiam corporis eum deserunt necessitatibus error veniam labore quasi saepe quaerat ea unde totam placeat beatae blanditiis repellat autem cupiditate quod quos at. Vitae voluptate ratione id ab cumque illo cum totam expedita, perspiciatis nam laudantium omnis dolorem, aliquid fugiat assumenda, possimus doloribus? Ipsam vitae eligendi velit ut, cupiditate nisi recusandae vel dolore, nobis odit veniam eveniet earum perspiciatis dolorum esse corrupti beatae quos provident officia qui, cum modi non. Quaerat quos dolorum totam officiis nostrum omnis blanditiis harum cum eligendi explicabo quisquam similique enim consequatur molestias cupiditate impedit, aperiam nesciunt dolore soluta odio voluptates fugiat vitae tempore. Odio ipsum quasi qui at corrupti reprehenderit nostrum alias, in, neque rem corporis dolore consequuntur ut. Doloribus nisi voluptas delectus quis hic, minima at consequuntur qui nostrum suscipit alias. Alias explicabo voluptates fuga repellat esse cum. Ea blanditiis perspiciatis excepturi molestias fugiat tempora, maxime, dolor quas magni deserunt, aliquam enim quasi omnis repudiandae fuga voluptates ad sit alias libero veniam. Rem, similique labore, atque sequi doloribus magnam at enim veniam eius nostrum eligendi! Fugit officia asperiores et, dolorum aspernatur possimus, nobis sequi reiciendis unde fuga nemo quam, minima eos neque aperiam aliquid. Tempora tempore neque, et alias ipsum ratione adipisci omnis nobis? Officiis blanditiis libero eaque quam assumenda eos ipsum fuga aut obcaecati similique dolor sapiente nisi, nam odio? Deleniti velit iste nam provident maiores laboriosam accusantium molestiae, unde neque eos atque tempore sequi et veniam? Inventore reiciendis error eum architecto est aut, tenetur dignissimos libero repudiandae modi accusamus ducimus culpa odio laborum itaque quod in atque eligendi. Animi, debitis in similique culpa obcaecati sed illo doloribus quasi numquam aut porro hic pariatur alias iusto nesciunt tempore a voluptate id, non ad, cum et. Qui praesentium cupiditate doloremque possimus sed porro deserunt aliquam quas. Ad, eius assumenda dolorum labore in, nemo odit odio suscipit dolorem nulla, dicta atque. Quia, repellat quod. Cum optio aspernatur magnam ducimus dolorem earum suscipit eos, rem sapiente, ipsa ut inventore quidem quae quis modi expedita perferendis tempore ullam blanditiis aperiam saepe error! Quibusdam, voluptate accusantium harum itaque fuga doloribus maiores iusto sunt beatae sapiente distinctio commodi in quam recusandae dolores nisi placeat? Veritatis optio dolorem distinctio. Libero eligendi vero molestiae vel ducimus perferendis quo sunt aliquid fugiat obcaecati quas incidunt enim expedita doloribus accusantium a necessitatibus eum voluptatem tenetur nemo delectus, laboriosam similique perspiciatis earum! Natus voluptatem quae maiores qui aliquam voluptatibus dolore, architecto, saepe libero eveniet fuga atque magnam harum ipsam numquam quibusdam. Aut odit non cupiditate modi, nihil quis eos quae rem, corrupti fuga fugit suscipit atque vel tempore, voluptate sint? Asperiores consequuntur, soluta cum laudantium vero ex. Voluptatum ipsum accusamus dolorem illo molestiae perspiciatis deleniti itaque ipsam optio, eius voluptates doloremque dolor, placeat labore molestias est at voluptatibus? Voluptatum accusantium consequatur nulla labore asperiores! Nulla aperiam, laudantium architecto amet, eligendi quos porro accusamus sit voluptatibus libero quidem? Doloremque nemo modi veniam nisi. Magnam laboriosam, voluptate, recusandae libero molestias quia beatae expedita fugit culpa ab velit! Aperiam quam, accusantium doloremque minus, incidunt odit dolorum voluptate laboriosam laudantium, possimus obcaecati delectus quae voluptatem! Suscipit provident recusandae non, reiciendis quam pariatur obcaecati. Ab quidem perferendis laudantium vel dolore repellendus corporis commodi ex veniam, molestias delectus ipsum non sed dolores dolorum quasi? Dignissimos aut iste ratione nisi itaque unde debitis incidunt fugiat voluptatum autem ipsa sapiente explicabo eius officiis, aspernatur totam dolorum dolores! Fuga alias quae facilis quam quis consequuntur omnis eligendi doloremque molestiae. Dignissimos, voluptate dolore! Tempora consequatur laudantium dignissimos modi. Voluptas adipisci similique non aut, repellat nisi quaerat illum dolores accusamus sequi labore dolorum dolorem fugit velit magni nobis reiciendis dignissimos soluta excepturi perspiciatis molestiae eius ea voluptates! Dolore modi aliquid dignissimos sunt, quaerat a quidem, pariatur quod corporis esse excepturi assumenda provident magnam vero voluptates accusamus, eligendi nam quae doloribus rem ad ipsa. Laboriosam maxime animi aliquam maiores tempore voluptatem, nulla consequuntur, ipsa quidem officia veritatis laudantium ad alias minima reiciendis totam et cum dolores facere minus magnam. Nostrum excepturi magnam dolorem quibusdam inventore qui non magni est doloribus molestias possimus, delectus vitae expedita perspiciatis voluptas. Obcaecati, enim voluptatum laboriosam vitae similique excepturi ab fugiat, quidem, dolores mollitia exercitationem nesciunt? Pariatur expedita architecto itaque possimus quisquam officiis modi earum qui eveniet aliquid illum vel, minima voluptate odit maiores at tempora saepe nisi numquam perferendis facilis fuga dicta sit omnis. Ipsum ipsam quibusdam, necessitatibus tempore quae sunt architecto aperiam eos dignissimos sed accusantium, assumenda corporis reprehenderit numquam quaerat excepturi dolore sequi, officiis nisi.
</p>
</div>

Javascript fixed menu scroll glitch

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>

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.

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

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

Related

Prevent active accordion item from closing on click

Disable "close" button until modal view PDF is scrolled down

My social media panels are not working properly

Javascript fixed menu scroll glitch

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

Categories

Resources