[SeagerParticipant]

I want the user to click on an accordion item and once clicked, it immediately scrolls the page to focus on that item.
How to do this?

PS: But just for one particular accordion, without affecting others on other pages.

[JadeModerator]

Hi there,

Thanks for writing in! Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

[SeagerParticipant]

Sure.

First state it’s like this:

Once clicked, page scrolls down to the anchor you clicked:

[RupokMember]

Hi there,

It’s not a feature and not usually possible but someone achieved that with some JS that you can try – https://community.theme.co/forums/topic/scroll-down-the-browser-when-click-open-accordion/#post-317869

Don’t just copy paste the code rather check the ID and replace with your own.

Cheers!

[SeagerParticipant]

I’ve tried that, I set up the ID in the accordion and then replaced the ID name with the name I gave but with no success. Am I doing something wrong?

[LelyModerator]

Hi There,

Please share your page URL where you implement the accordion with the code so we can check where the issue is coming from.

[SeagerParticipant]

I’m working on a private page and cannot share login details. :/

But I just have to set on the accordion ID a name and then do like this:

jQuery(function($){

$("#MY-ID-NAME.x-accordion-toggle").click(function() {   

	if($("#MY-ID-NAME.x-accordion-toggle").hasClass('collapsed') == true)
	{
			$('html, body').animate({scrollTop: 'xxx0px'}, 500);
		
	} 
});
 
});

On the Customize > Javascript

right?

[RupokMember]

Hi there,

You need to replace #MY-ID-NAME with your given ID and xxx0px with a real pixel value like 200px. And yes you need to place under Customize > Custom > JavaScript.

Hope this makes sense.

[SeagerParticipant]

Worked! Thank you! 🙂

[Paul RModerator]

You’re welcome! 🙂

[Author]

Posts