javascript - Opening and scrolling to accordion anchor from fixed navigation -

i working fixed navigation trying use control accordions below it.

what trying achieve when link in navigation clicked scroll section accordion , opens accordion while giving class .open (making active essentially) .

when link clicked previous accordion closes , new accordion opens (while placing content @ top of browser window)

currently have set the fixed navigation scrolls correct location (almost - position not aligned when 1 opens , closes if accordion has more content another)

i created , awful script open , close accordions on click of nav link bulky , 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 current code: http://codepen.io/algib/pen/qbxpkg

any or guidance proper opening , closing of accordions, , making sure accordion content visible @ top when opening , closing.

first let's make sure understand correctly: you want open accordion entry represented navigation entry clicked , want scroll top. right?

the approach (to make browser-friendly possible) leverage location.hash. made jsfiddle hashchange seems work not within stackoverflow fiddles atm.

the javascript part (vanilla js, can replace queryselector $ if want) simply

var sections = document.queryselectorall('section');  // https://developer.mozilla.org/en-us/docs/web/events/hashchange // gives polyfill if 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 being

<nav>   <a href="#a-section">the nav entry section a</a> </nav> <article><!-- accordion, can block -->   <section id="a-section">     <header><h1><a href="#a-section">section header, visible</a></h1></header>     <p>anything else visible if section has <code>class="active"</code></p>   </section> </article> 

edit: forgot copy necessary css. bad.

section > * { display: none; } section.active > *, section > header { display: block; }