Accordion Conent Script

[larrysanders]

1) Script Title: Accordion

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/ddaccordion.htm

3) Describe problem: I'm trying to modify the script to go to an anchor when one of the headers is fully expanded. So far I've succeeded in doing this BEFORE the content is done expanding, however I'd like the div to be fully expanded before the script goes to the anchor. I have no objection to a timer, however when I tried this nothing happened (see the comented code).



expandit:function($targetHeader, $targetContent, config, useractivated, directclick, skipanimation){
var ajaxinfo=$targetHeader.data('ajaxinfo')
if (ajaxinfo){ //if this content should be fetched via Ajax
if (ajaxinfo.status=="none" || ajaxinfo.status=="loading")
this.ajaxloadcontent($targetHeader, $targetContent, config, function(){ddaccordion.expandit($targetHeader, $targetContent, config, useractivated, directclick)})
else if (ajaxinfo.status=="cached"){
$targetContent.html(ajaxinfo.cacheddata)
ajaxinfo.cacheddata=null
ajaxinfo.status="complete"
}
}
this.transformHeader($targetHeader, config, "expand")
$targetContent.slideDown(skipanimation? 0 : config.animatespeed, function(){
config.onopenclose($targetHeader.get(0), parseInt($targetHeader.attr('headerindex')), $targetContent.css('display'), useractivated)
if (config.postreveal=="gotourl" && directclick){ //if revealtype is "Go to Header URL upon click", and this is a direct click on the header
var targetLink=($targetHeader.is("a"))? $targetHeader.get(0) : $targetHeader.find('a:eq(0)').get(0)
if (targetLink) //if this header is a link
setTimeout(function(){location=targetLink.href}, 200) //ignore link target, as window.open(targetLink, targetLink.target) doesn't work in FF if popup blocker enabled
}

})
function gotohash(thehash)
{
window.location.hash=thehash;
}

var thehash = config.headerclass+$targetHeader.attr('headerindex');
gotohash(thehash); //this works but does it as the div is expanding

// setTimeout(gotohash(thehash)", 500); //when this code isn't commented, is does nothing, I assume something changes where that function is no longer available after the time has passed

},


Any help would be greatly appreciated.

[ddadmin]

Firstly, try changing the "revealtype" option within the initialization code for your Accordion Content to "clickgo", so the script navigates to the expanded header's URL once it's expanded, for example:


//Initialize Arrow Side Menu:
ddaccordion.init({
headerclass: "menuheaders", //Shared CSS class name of headers group
contentclass: "menucontents", //Shared CSS class name of contents group
revealtype: "clickgo", //Reveal content when user clicks or onmouseover the header? Valid value: "click", or "mouseover"
mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc]. [] denotes no content.
onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
persiststate: true, //persist state of opened contents within browser session?
toggleclass: ["unselected", "selected"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["none", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: 500, //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
oninit:function(expandedindices){ //custom code to run when headers have initalized
//do nothing
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing
}
})

This works for regular "http://" header URLs; in order to get it to also work with in-page anchors, now use the modified attached .js file in place of the original instead.

[larrysanders]

Firstly, try changing the "revealtype" option within the initialization code for your Accordion Content to "clickgo", so the script navigates to the expanded header's URL once it's expanded, for example:


//Initialize Arrow Side Menu:
ddaccordion.init({
headerclass: "menuheaders", //Shared CSS class name of headers group
contentclass: "menucontents", //Shared CSS class name of contents group
revealtype: "clickgo", //Reveal content when user clicks or onmouseover the header? Valid value: "click", or "mouseover"
mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc]. [] denotes no content.
onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
persiststate: true, //persist state of opened contents within browser session?
toggleclass: ["unselected", "selected"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["none", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: 500, //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
oninit:function(expandedindices){ //custom code to run when headers have initalized
//do nothing
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing
}
})

This works for regular "http://" header URLs; in order to get it to also work with in-page anchors, now use the modified attached .js file in place of the original instead.

Thank you for the response. I think my problem was unclear. Everything works except for the delay. I want to do exactly what I'm doing now only delay the gotohash(thehash); function or make it happen after the header is done expanding. It looked like the slidedown animation was a built in js function so that's probably not a solution.

Essentially I don't know why gotohash(thehash); works by itself but when I put setTimeout(gotohash(thehash)", 500); nothing happens.

[ddadmin]

Thank you for the response. I think my problem was unclear. Everything works except for the delay. I want to do exactly what I'm doing now only delay the gotohash(thehash); function or make it happen after the header is done expanding.


Hmm actually the modified .js file I posted should do that already- that is, go to the anchor link specified inside the expanded header after it has fully expanded. The setting "revealtype=clickgo" does this for regular links, so the modified .js file just extends this behavior to in page anchor links as well.