animaged collapsible divs with anchors - very buggy

[phudgins]

1) Script Title: Animated Collapsible DIV v2.4

2) Script URL (on DD):

http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm

3) Describe problem:

I've got a page, here, http://www.mexicocityexperience.com/travel_center - with multiple collapsible divs in a group. They're each triggered by the "read more" links you'll see in the copy. I set up the links with anchors, and "onclick," with the hopes that each div would be positioned at the top of the browser when the appropriate link was clicked.

Problem is it's very buggy. Works sometimes, but other times when the div is being revealed, the whole page is scrolling and the user is left looking at the revealed div halfway through the div content.

Hope that makes sense. Just looking for a good way to use anchors, so the site visitor is positioned at the top of the div when the corresponding "read more" link is clicked.

THANKS FOR ANY HELP/IDEAS/RECOMMENDATIONS!

[ddadmin]

The problem occurs essentially because the jumping to the anchor is occurring at the same time as the expanding/collapsing of a content, causing the final scroll position to not always be the correct one. Instead of using HTML anchors to jump to the anchor in question, try making use of the ontoggle event handler (http://www.dynamicdrive.com/dynamicindex17/animatedcollapse_suppliment.htm) of the script to execute custom code at the end of an expand/collapse animation, in this case, to then scroll to the activating anchor. Specifically, try the below:

1) For all your anchor links, remove the #anchor value from the href attribute and revert it back to just executing JavaScript when clicked on. Also, give the anchor an ID with the value DIVID-anchor, where DIVID is the ID of the DIV the anchor is toggling.


<a id="archeology-anchor" href="javascript:animatedcollapse.toggle('archeology')">read more</a>

2) Inside the initialization code of the script in the HEAD section of your page, populate the ontoggle event handler with the following custom code:


animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
//$: Access to jQuery
//divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
//state: "block" or "none", depending on state
if (state == "block"){
var anchorid = divobj.id + "-anchor"
if ($('#' + anchorid).length == 1)
$('#' + anchorid).get(0).scrollIntoView()
}
}

That should do it in getting the script to scroll to the anchor of each collapsible DIV once the DIV is expanded.

[phudgins]

Awesome... works perfectly... really appreciate the help!