Docs

[FonsIT]

Hi there!

I have a one-page design, where large bodies of text are hidden in accordion tabs. Upon expanding an accordion (I have several) I’d like the page to scroll down so the accordion content starts at the top of the screen. Upon closing the accordion I’d like to scroll back to the top of the section (so just link to #subpageID).

The first behaviour, scroll down on opening, I have accomplished using this guide:
https://community.theme.co/forums/topic/accordion-behaviour-on-opening/
And attempting to accomplish the second thing I’ve been experimenting with this:
https://community.theme.co/forums/topic/close-accordion-button/

However the two javascripts seem to be conflicting. Is there a way to achieve this:
1 Upon expanding the accordion, scroll down so the top of the accordion theis at the top of the screen
2 Upon closing the accordion, link/scroll to a specified #ID

I hope you can help me!
Regards,
Fons

[Paul R]

Hi Fons,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation.

[FonsIT]

Hi Paul,

Thanks for the reply. Currently the site can be found here:

http://www-d-o-t-circumflex-d-o-t-com.alvast-online.nl/

[Rad]

Hi there,

You should apply the last provided code,

jQuery(document).ready(function($) {
  $('.x-accordion-toggle').click(function() {
    var cur = $(this).offset().top;
    var navbar = $('.x-navbar').outerHeight() + $('#wpadminbar').outerHeight();
    console.log(cur);
    setTimeout(function() {
      $('html, body').stop().animate({
          scrollTop: cur - navbar
      }, 700, 'swing');
    }, 300);

  });
});

It uses navbar offset compared to first one.

Thanks!

[FonsIT]

Hi Rad,

Thanks for your reply! You code fixes the offset for scrolling, which is nice, but not what I’m looking for. To your knowledge, is there a way to:

1 Upon expanding the accordion, scroll down so the top of the accordion is at the top of the screen (this works already)
2 Upon closing the accordion, link/scroll to a specified #ID? (I want to end up back at the start of the page after closing an accordion, not get stuck between two pages!)

I hope you understand my question now, and that there is a way to achieve this 🙂

Thanks in advance!
Fons

[Paul R]

Hi Fons,

It could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding. Take care!

[Author]

Posts