Opening and scrolling accordion with fixed navigation
I am currently working with a fixed navigation which I am trying to use to control the accordions underneath it.
What I am trying to achieve is when a link in the navigation is clicked, it will scroll to the part where the accordion is and open the accordion, giving it the .open class (making it essentially active).
when another link is clicked, the previous accordion then closes and a new accordion opens (when placing content at the top of the browser window)
Currently I have set where the fixed nav scrolls to the desired location (almost - the position doesn't align properly when opened, and the other one closes if the accordion has more content, then the other)
I created and terrible script to open and close accordions on click of a nav link, however its very cumbersome and inefficient:
$(function() {
$('.history').click(function() {
$(".submenu").eq(1).not($(this).next()).slideUp('slow');
$(".submenu").eq(2).not($(this).next()).slideUp('slow');
$(".submenu").eq(3).not($(this).next()).slideUp('slow');
$(".submenu").eq(4).not($(this).next()).slideUp('slow');
$(".submenu").eq(5).not($(this).next()).slideUp('slow');
$('.submenu').eq(0).parent().toggleClass('open');
$('.submenu').eq(0).slideToggle();
});
$('.details').click(function() {
$(".submenu").eq(0).not($(this).next()).slideUp('slow');
$(".submenu").eq(2).not($(this).next()).slideUp('slow');
$(".submenu").eq(3).not($(this).next()).slideUp('slow');
$(".submenu").eq(4).not($(this).next()).slideUp('slow');
$(".submenu").eq(5).not($(this).next()).slideUp('slow');
$('.submenu').eq(1).parent().toggleClass('open');
$('.submenu').eq(1).slideToggle();
});
$('.school').click(function() {
$(".submenu").eq(0).not($(this).next()).slideUp('slow');
$(".submenu").eq(1).not($(this).next()).slideUp('slow');
$(".submenu").eq(3).not($(this).next()).slideUp('slow');
$(".submenu").eq(4).not($(this).next()).slideUp('slow');
$(".submenu").eq(5).not($(this).next()).slideUp('slow');
$('.submenu').eq(2).slideToggle();
$('.submenu').eq(2).parent().toggleClass('open');
});
$('.community').click(function() {
$(".submenu").eq(0).not($(this).next()).slideUp('slow');
$(".submenu").eq(1).not($(this).next()).slideUp('slow');
$(".submenu").eq(2).not($(this).next()).slideUp('slow');
$(".submenu").eq(4).not($(this).next()).slideUp('slow');
$(".submenu").eq(5).not($(this).next()).slideUp('slow');
$('.submenu').eq(3).slideToggle();
$('.submenu').eq(3).parent().toggleClass('open');
});
$('.sold').click(function() {
$(".submenu").eq(0).not($(this).next()).slideUp('slow');
$(".submenu").eq(1).not($(this).next()).slideUp('slow');
$(".submenu").eq(2).not($(this).next()).slideUp('slow');
$(".submenu").eq(3).not($(this).next()).slideUp('slow');
$(".submenu").eq(5).not($(this).next()).slideUp('slow');
$('.submenu').eq(4).slideToggle();
$('.submenu').eq(4).parent().toggleClass('open');
});
$('.active').click(function() {
$(".submenu").eq(0).not($(this).next()).slideUp('slow');
$(".submenu").eq(1).not($(this).next()).slideUp('slow');
$(".submenu").eq(2).not($(this).next()).slideUp('slow');
$(".submenu").eq(3).not($(this).next()).slideUp('slow');
$(".submenu").eq(4).not($(this).next()).slideUp('slow');
$('.submenu').eq(5).slideToggle();
$('.submenu').eq(5).parent().toggleClass('open');
});
});
here is my current code: http://codepen.io/algib/pen/QbxPKG
any help or guidance in opening and closing my accordions properly and still make sure the accordion contents are visible at the top when opening and closing.
source to share
First, make sure I understand you correctly: you want to open the accordion entry represented by the navigation button pressed and you want to scroll up. Right?
The approach (to make it as browser friendly as possible) would use location.hash
. I made a jsfiddle for you as hashchange
it seems to not work correctly from within the stackoverflow fiddles atm.
The JavaScript part (vanilla js, you can replace the RequestSelector with $
if you like) just
var sections = document.querySelectorAll('section');
// https://developer.mozilla.org/en-US/docs/Web/Events/hashchange
// gives you a polyfill if you need it.
window.addEventListener('hashchange', function(event) {
[].forEach.call(sections, function(element) {
element.classList.remove('active');
});
document.getElementById(location.hash.substring(1)).classList.add('active');
});
with html
<nav>
<a href="#a-section">the nav entry for section a</a>
</nav>
<article><!-- the accordion, can be any block -->
<section id="a-section">
<header><h1><a href="#a-section">section header, always visible</a></h1></header>
<p>anything else only visible if section has <code>class="active"</code></p>
</section>
</article>
Edit: I forgot to copy the required css. My bad one.
section > * { display: none; }
section.active > *,
section > header { display: block; }
source to share