PDA

View Full Version : Animated collapse - go to prev/next



Kempison
01-19-2010, 02:12 AM
1) Script Title: Animated Collapse

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

3) Describe problem: Is there a way to create a previous/next function taking ID from the existing JavaScript? Here goes:

This is the script I have and below is the HTML:

EXISTING SCRIPT FROM DD

<script type="text/javascript">
// EXPANDING CONTENT DIVs
animatedcollapse.addDiv('001', 'fade=1,speed=500,hide=1')
animatedcollapse.addDiv('002', 'fade=1,speed=500,hide=1')
animatedcollapse.addDiv('003', 'fade=1,speed=500,hide=1')
//etc, etc...

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 ($('#'+divobj.id+"-toggle").length==1){ //if toggler link exists
$('#'+divobj.id+"-toggle").css('color', (state=='block')? '#FFF' : '#CCC') //first on, second off
}
}

animatedcollapse.init()
</script>

HTML

<a href="#" onClick="$.scrollTo('#xxxjump', 800, {easing:'elasout'}); javascript:animatedcollapse.toggle('xxx')" id="xxx-toggle">Next</a>

All references of 'xxx' start with a default three-digit number, let's say 002


Then when either function is clicked the number changes +/-1 (001 or 003) creating a new anchor HREF jump and the next DIV in the sequence opens


The sequence should be controllable to run reverse in default as the biggest 'xxx' will be at the top of my page and the user will go down per click i.e. 003, 002, 001


I can only raw code HTML and CSS and I've gone around in so many circles with this I've got a headache. Due to me not being clear about what I want on other sites, I'm looking for someone to solve this issue or at least nudge me 90% of the way. A personal acknowledgement in the source code will of course be granted if requested.

Cheers in advance for any help.