Hi there,

The code can be placed in any .liquid template files for the pages where you need to have this functionality or simply add them in the global theme javascript file. However, the example above is using jQueryUI accordion. So you’d also need to determine what accordion library your Shopify theme is using.

Hi Dirk,

In your website I noticed you are using Bootstrap to produce the accordion. That is fine because they support events too as shown here http://getbootstrap.com/javascript/#collapse-events

So you probably can write something like:

$('#accordion03').on('shown.bs.collapse', function (ev) {
	// do something…
	$toggler = $(ev.target).prev();
	if(!$.isEmptyObject($toggler.offset())) {
		$('html:not(:animated), body:not(:animated)').animate({ scrollTop: $toggler.offset().top }, 'slow');
	}
})

very interesting article. I’m not using the JQuery UI library, but would you mind looking at this site. It’s the same problem… http://www.incozina.be/index.php/nl/je-droomt-van-je-eigen-zaak-2

Kind regards,
D

Hi Chris,
What JS library are you using for the accordion? Roughly, the CSS would be something like:

.your-element {
   width:300px;
   height: 400px;
   overflow:scroll;
}