When accordion closes scroll to section

[NiallD1991]

Hi There,

On my homepage under my testimonials, I have created a hidden accordion which contains quite a bit of content and linked the open and close to a button underneath it.

Of course, when it closes it causes the user to jump further down the page rather than just below the button. Is there a way to make the page auto scroll back to the button when the accordion is closed?

If not, am I going the wrong way about achieving this accordion effect? maybe there is a simpler way. I know PRO is mega-powerful and has loads of options that I likely don’t know about.

Thanks in advance!

[ruenel]

Hello Niall,

Thanks for writing in! I have checked your page and I have seen how the elements were structured. You added a button action and a JS code:

jQuery(document).ready(function($) {
  $('.open_accordion').on( "click touchstart", function(e) {
    
    var $this = $(this);
    var thisHref = $this.attr('href');
    var accordion = $(thisHref).find('button');

    if ( accordion.length ) {
      e.preventDefault();

      accordion.trigger('click');
      
      return false;
    }

  });
});

The e.preventDefault(); and the return false; prevents any other click/touch events. This is why the button link has no effect. You might need to remove that lines. And then lastly, if you are going to link to a section, the ID testimonial-accordion must be added to the section element instead.

Please note that custom coding is outside the scope of our support. Issues that might arise from the use of custom code and further enhancements should be directed to a third party developer.

Best Regards.

[NiallD1991]

Hi @ruenel thanks that worked perfectly.

Just following on from that. Is there a way to set the button so that the icon only points down before clicked and the points up when the accordion is open.

It almost does it now as when the accordion is open the icon points up. But when hovering the icon switches between the primary & secondary icon on hover.

How would I fix this?

[rad]

Hi Niall,

Sure, you could do that, just switch the value of start and end position

The start should be 90, and end as 0.

I’m not sure about your second question as I don’t see a secondary icon on my end, would you mind providing a sample URL where your accordion is displayed?

Thanks!

[NiallD1991]

Hi Rad,

I am actually using a button to open and close the accordion as opposed to the accordion.

It is located on my home page.

I will attach a secure note

[jade]

Hello Niall,

It’s the same way as the button. You just have to set the secondary icon to be the same as the primary icon:

Hope this helps.