New to the community? Start here

Accordion Item with Long Content Scrolls off Screen

How can I set a dynamic anchor so that when an accordion item is opened, it automatically scrolls to the top of the screen

http://bit.ly/12D6erM

Click on California under locations, and then scroll down and click any other state, and you’ll see what I mean.

Thu, 3 Oct 2013 7:21:56
  • PC
    • WPMU DEV Initiate

    Hey Michael,

    I visited the site and see that once an accordion item is clicked, the new window opens.

    Do you want the old window to scroll to top when the accordion is clicked ?

    While I am not a jquery expert, if I can get the exact requirement, I can get the right person to advise :slight_smile:

    Cheers

    PC

    Sales &Support

  • Michael
    • Design Lord, Child of Thor

    New Window? Exactly what text did you click on? The titles of the accordion, like “California” under the Locations page should just expand the accordion, not open a new window.

    But yes, I’d like to have the current accordion item, scroll to the top of the window. Basically just setting an anchor point would great, if it animated with jQuery even better. I’m just not sure how to do either dynamically.

    Thanx!

  • Jack Kitterhing
    • Code Norris

    Hi there @Michael

    I hope you are well today, sorry about the delay here.

    I have taken a look and it all works correctly for me, i.e it doesn’t open in a new window.

    With the jQuery part, let me see what my colleague @Alexander Rohmann says on that :slight_smile:

    Thanks for your patience, hope your having a great weekend!

    Kind Regards

    Jack

  • Michael
    • Design Lord, Child of Thor

    Hi Jack,

    Thanx. I actually just heard back from the developer and he fixed it, as it will be an update in a future version of the theme.

    Adding the jQuery animated scroll would be great though. For reference with that, here’s the function that was changed : 

    heading.each(function(i)
    
{
    
var thisheading =  $(this), content = thisheading.next(options.content, container);
    

    
function scroll_to_viewport()
    
{
    
//check if toggle title is in viewport. if not scroll up
    
var el_offset = content.offset().top,
    
scoll_target = el_offset - 50 - parseInt($('html').css('margin-top'),10);
    

    
if(win.scrollTop() > el_offset)
    
{
    
$('html:not(:animated),body:not(:animated)').animate({scrollTop: scoll_target},200);
    
}
    
}
    

    
if(content.css('visibility') != "hidden")
    
{
    
thisheading.addClass('activeTitle');
    
}
    

    
thisheading.on('click', function()
    
{
    
if(content.css('visibility') != "hidden")
    
{
    
content.slideUp(200, function()
    
{
    
content.removeClass('active_tc').attr({style:''});
    
});
    
thisheading.removeClass('activeTitle');
    

    
}
    
else
    
{
    
if(container.is('.toggle_close_all'))
    
{
    
allContent.not(content).slideUp(200, function()
    
{
    
$(this).removeClass('active_tc').attr({style:''});
    
scroll_to_viewport();
    
});
    
heading.removeClass('activeTitle');
    
}
    
content.addClass('active_tc').slideDown(200,
    

    
function()
    
{
    
if(!container.is('.toggle_close_all'))
    
{
    
scroll_to_viewport();
    
}
    
}
    

    
);
    
thisheading.addClass('activeTitle');
    
location.replace(thisheading.data('fake-id'));
    
}
    
});
    
});

    “scroll_to_viewport()” of course, being the additional function added to the original.

  • Alexander
    • DEV MAN’s Mascot

    Hi @Michael,

    I’m sorry for not getting to this sooner. Here’s some jQuery that will help here:

    jQuery(function($){
    

    
$('.toggler').click(function(){
    

    
var active = $('.active_tc');
    
var offset = $(this).siblings('.toggle_wrap').offset().top;
    

    
if (offset > active.offset().top)
    
offset-=active.height();
    

    
$('html, body').animate({
    
scrollTop: offset
    
}, 400);
    
});
    
});

    This can be used in addition to what’s running right now. I’ve tested it from the browser and it’s working well.

    Best regards,

  • Michael
    • Design Lord, Child of Thor

    Hi Alexander,

    Thank you for the detailed reply. No worries on the timeframe, as I wasn’t in hurry with this particular item, just saw it as a bonus.

    Forgive my ignorance, but where should I place this function? Would it work in my child theme’s functions.php file? Or do I have to include it in the file that the function I posted above is in?

    Please let me know. Thanx!

  • Alexander
    • DEV MAN’s Mascot

    Hi @Michael,

    It’s Javascript, so you could place in a javascript file that is loaded by your theme.

    If you’d like to place in functions.php you can do this to. Use this version which is setup to hook into the bottom of the page to add the script:

    add_action('wp_footer','accordian_custom_js');
    

    
function accordian_custom_js() {
    
?><script>
    
jQuery(function($){
    

    
$('.toggler').click(function(){
    

    
var active = $('.active_tc');
    
var offset = $(this).siblings('.toggle_wrap').offset().top;
    

    
if (offset > active.offset().top)
    
offset-=active.height();
    

    
$('html, body').animate({
    
scrollTop: offset
    
}, 400);
    
});
    
});
    
</script><?php
    
}

    Best regards,