Navigating dom to adjust custom jQuery accordion -
i have accordion working , works go down accordion, come it's kinda glitchy.
i want make when click on masthead open content within masthead , anchor top of page top of masthead. know need in pseudocode not sure code.
here's html:
<html> <head> <meta> <title></title> <link rel="stylesheet" href="made-insider.css"> </head> <body> <div class="accordion"> <div id="one" class="masthead"></div> <div class="insider-info"></div> <div id="two" class="masthead"></div> <div class="insider-info"></div> <div id="three" class="masthead"></div> <div class="insider-info"></div> <div id="four" class="masthead"></div> <div class="insider-info"></div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="made-insider.js"></script> </body> </html>
here's jquery:
$(function() { //checking position of panels var allpanels = $('.insider-info').hide(); //working accordion code -- needs smoother $('.accordion > .masthead').click(function(event) { if ($(this).hasclass('active')) { $(this).removeclass('active') .next(allpanels).slideup(400); } else { var toppos = $(this).position(); $('.active').removeclass('active') .next(allpanels).slideup(400); //if previous accordion open $('body').animate({ scrolltop: toppos.top - 200}, 600); //if previous accordion not open //$('body').animate({ scrolltop: toppos.top}, 600); $(this).addclass('active') .next(allpanels).slidedown(400); } }); });
i've tried things
if ($(this).prev('.masthead').hasclass('.active')){ behavior }, if ($(this).prev().prev().hasclass('.active'){ behavior } if ($(this).eq() < $('div.active').eq()){ behavior }
but none of them work. suggestions??
the problem spot in code need know index of .active
runs after remove class .active
whatever element has it.
solution: move bit of code
$('.active').removeclass('active') .next(allpanels).slideup(400);
to end of event handler, right before add class .active
new active element.
then condition you're looking is
if ($('.active').length && $('.active').index() < $(this).index()) { // active accordion above new 1 (we're moving down) }
so, together, you're code this:
$('.accordion > .masthead').click(function (event) { if ($(this).hasclass('active')) { $(this).removeclass('active') .next(allpanels).slideup(400); } else { var toppos = $(this).position(); // active accordion above new 1 if ($('.active').length && $('.active').index() < $(this).index()) { $('body').animate({ scrolltop: toppos.top - 200 }, 600); } else { // active accordion below new one, or there no previous accordion $('body').animate({ scrolltop: toppos.top }, 600); } $('.active').removeclass('active') .next(allpanels).slideup(400); $(this).addclass('active') .next(allpanels).slidedown(400); } });
Comments
Post a Comment