I need some help creating something similar to an accordion. The goal is that if you click a link in the navigation the one section disappears and the one you clicked appears (at the same position and unnoticeable). If possible it should also automatically scroll to the start of the section(end of the navigation).
Any advice or starting point?
$(function() {
var shrinkHeader = 50;
$(window).scroll(function() {
var scroll = getCurrentScroll();
if (scroll >= shrinkHeader) {
$('#navbar').addClass('shrink');
} else {
$('#navbar').removeClass('shrink');
}
});
function getCurrentScroll() {
return window.pageYOffset || document.documentElement.scrollTop;
}
});* {
margin: 0;
padding: 0;
font-family: helvetica;
}
body {
height: 300vh;
}
h1 {
text-align: center;
font-size: 5rem;
top: 2vh;
position: relative;
}
h2 {
text-align: center;
font-weight: 300;
margin-top: 3vh;
font-size: 1rem;
}
ul {
list-style: none;
text-align: center;
}
ul li {
display: inline-table;
margin-left: 0.25vw;
padding: 0.25vw;
}
a {
color: #fff;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 0.15em;
display: inline-block;
padding: 15px 20px;
position: relative;
}
#navbar {
text-align: center;
width: 100%;
color: white;
z-index: 999;
transition: 0.3s;
}
#navwrapper {
background: linear-gradient(250deg, #0061ff, #60efff);
background-size: 400% 400%;
height: 250px;
}
#navbar.shrink {
height: 130px;
line-height: 18px;
position: fixed;
background-color: lightgray !important;
transition: 0.3s;
}
#navbar.shrink li {
font-size: 1.2rem;
margin-top: 1.5vh;
transition: 0.3s;
}
#navbar.shrink a {
color: #343a40 !important;
}
#navbar.shrink a:after {
background: none repeat scroll 0 0 transparent;
bottom: 0;
content: "";
display: block;
height: 2px;
position: absolute;
background: #343a40 !important;
}
#navbar.shrink h1 {
font-size: 4rem;
color: #343a40;
top: 2vh;
transition: 0.3s;
} <nav id="navwrapper">
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="javascript/navbar fixed.js"></script>
<div id="navbar" class="navbar navbar-dark bg-primary navbar-fixed-top">
<h1 id="titel">HEADLINE</h1>
<ul>
<li class="nav-item"><a href="#home" class="nav-link">
<h2>content1</h2>
</a></li>
<li class="nav-item"><a href="#wir-ueber-uns" class="nav-link">
<h2>content2</h2>
</a></li>
<li class="nav-item"><a href="#aktionen" class="nav-link">
<h2>content3</h2>
</a></li>
<li class="nav-item"><a href="#terminvereinbarung" class="nav-link">
<h2>content4</h2>
</a></li>
<li class="nav-item"><a href="#infos" class="nav-link">
<h2>content5</h2>
</a></li>
</ul>
</div>
</nav>
<section id="content1">
<div>
Lorem ipsum
</div>
</section>
<section id="content2">
<div>
Lorem ipsum
</div>
</section>
<section id="content3">
<div>
Lorem ipsum
</div>
</section>
<section id="content4">
<div>
Lorem ipsum
</div>
</section>
<section id="content5">
<div>
Lorem ipsum
</div>
</section>