Making the content jump back to top when next accordion headline is clicked

Hi backdrifting,

It is possible yes, but this is outside of the scope of this module, as it relates to your specific use-case only. However, I can point you in the direction you should go:

Use drupal_add_js() to add a js file, for the blocks/views you are intending to add this behaviour. I suggest you use a preprocess function in your template.php, which is faster than in the tpl file.

  $('#IDOFYOURVIEWCONTAINER .accordion-header').click(function(){
     var $content = $(this).next();
    $content[0].scrollTop = 0;
    });

I think this should get you what you want, though not sure it's the best way of going about it. Still, it's a good start. Use firebug to findout the IDOFYOURVIEWCONTAINER ;)

Please add this as a feature. It is really user un-friendly to have to manually scroll to a group header that just opened.

ñull, please read my comment above, I'm not going to include a feature which doesn't apply to the module's core css.

The problem I see with it is that the scroll should happen when the accordion animation finishes and that can i.m.h.o. only when I put the scroll in a call back function of your $ourContent.slideToggle(speed);. So I am forced to actually patch your module. I don't like it to re-patch your module every time it is updated. That was the reason I kindly requested it to be a feature.

The scrollTop=0; did not work for me. What I had to do in the end was getting in the help of the scrollTo plug-in and changing views_accordion/views-accordion.js:

// and open our section
$ourContent.slideToggle(speed,function(){$(this).parent().parent().parent().parent().scrollTo($(".accordion-header-active"),800)});

The number of parent() depends on your particular situation and you have use Firebug to count the actual amount of parents from accordion header to the div with overflow:auto.

@ñull: I am looking to do the same thing as you did, but I don't get any difference in behavior. I see the scrollTo plugin included, and I've tried different numbers of .parent(), but it may be possible I am still not adding the scrollTo plugin correctly.
Can you give a step-by-step list of how you did these, please? Did you manually set a particular node to have the overflow:auto setting? Or did you set overflow:scroll CSS of the original OP?

@Manuel: I'm using the accordion to aggregate some news items, so the exact content node that stretches too long can vary over time. For this particular use case, the accordion is really excellent, but, unfortunately, the scrolling required makes it almost unusable. Google Reader seems to calculate whether a clicked node will fit in the open window without scrolling; it it cannot, it scrolls the header to top of the window. Hopefully, something like this solves usability issue related to scrolling without causing you to support every different use case (I'm just guessing that it won't cause other usability issues). Manuel, I am just looking for pointers on how to proceed since ScrollTop=0 did not work either.
Thanks.

Add/Edit: I thought I had tried this a gazillion times, but I was trying code for 'scrollable elements' rather than for the entire 'window'. The goal: When I clicked on an accordion item's header, I wanted the header to scroll to the top of the window, pushing older accordion items out of the view. This worked by using the scrollTo plugin, and by patching views-accordion.js:
// and open our section

/* $ourContent.slideToggle(speed);*/

$ourContent.slideToggle(speed,function(){$.scrollTo('.accordion-header-active',500)});

$ourTrigger.addClass(activeClass);

}

}

may i suggest something? The functionality as is = logical. The only way that content sliding could create usability issues is if 1. the auto closing is enabled 2. there is more than ~2 solid paragraphs in the content of each accordion "fold". And that is exactly how my setup looked. However i simply disabled the automatic closing of open folds and added some css to show an arrow (open / closed). Solution is simple and nothing needs to be coded and creates no usability obstructions...

Thanks for the feedback, drupalusering. Yes, I have not disabled autoclosing, and usually have five or more paras per item. I tried your method, but in my case it results in an overly long page if the user reads all the 10 items. Using open/close arrows should make this work better -- but did you do this for each individual item or for the overall accordion (the toggleAccordion css that is part of VA)? The latter didn't work for me too well, since it would require scrolling to either the top or bottom to close the items. If the former, can you share your css so that I could see how it works for me? Thanks, again.

Is this function now working? I'd like to scroll to active headline but it seems to not work...

What I ended up doing is the following.
In my template.php file I added this:

function MYTHEME_preprocess_views_view($vars) {
  if($vars['view']->name == "NAME_OF_THE_VIEW") {
    drupal_add_js(drupal_get_path('theme', 'MYTHEME') . '/js/scrolltopaccordion.js');
  }
}

This is the code in my javascript file:

jQuery(document).ready(function($) {
  $('.ui-accordion-header').click(function(){
    $('html,body').animate({
      scrollTop: 0},
      'fast'
    );
  });
});

This code scrolls the window all the way to the top when an accordion header is clicked. You could use a timeout function wait for the accordion animation to end and then scroll to the accordion header that was just clicked. But I didn't need that.

Thank you Bartelli, I followed your idea and I implemented the scrolltopaccodtion.js file to this:

jQuery(document).ready(function($) {
	$('.ui-accordion-header').click(function(){
		var currentId = this.id;
		currentId = "#" + currentId;
		setTimeout(function() { //<-- delayed animation to solve conflicts with others "scrollto" 
			$('html, body').animate({
				scrollTop: $(currentId).offset().top - 65 //<-- This beacuse I have a fixed header
			}, 1000);
		}, 500);
	});
});