Animated Collapsible DIV Q's!!!

**claytonbellmor** · 09-05-2007, 01:51 AM

Animated Collapsible DIV

Web Example

Problem: I have three DIV's that slide down, problem is that if one is already down, and someone clicks on another, it simply extends the DIV's vertically.

I tried correcting this (with my largely limited knowledge of javascript) by having a "slidedown" activate whenever a link was clicked, so that if any other DIV's were down, they would be covered by the descending one.

Problem is that it looks ridiculous, and if you click fast enough (before the animation finishes) you can still extend the DIV's too far vertically.

I was hoping there was a better way to 'clear' the area before another DIV slided down.

Thanks!!!

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<script type="text/javascript" src="animatedcollapse.js"> </script>
<link rel=StyleSheet href="master.css" type="text/css" media="all">
<body>


	<div id="navigation">
	<a href="javascript:collapse3.slideup(),collapse4.slideup(),collapse2.slideit()">Movies</a>
	<a href="javascript:collapse2.slideup(),collapse4.slideup(),collapse3.slideit()">Photos</a>
	<a href="javascript:collapse2.slideup(),collapse3.slideup(),collapse4.slideit()">Resume</a>
	</div>


	<!--DrawerOne-->
	
	<div id="movies">
		
		<div>
			<p>Content Area for Movies</p>
		</div>

	</div>

	<!--DrawerOne END-->
	
		<!--DrawerTwo-->
	
		<div id="photos">
		
			<div>
				<p>Content Area for Photos</p>
			</div>

		</div>

		<!--DrawerTwo END-->
	
			<!--DrawerThree-->
	
			<div id="bio">
		
				<div>
					<p>Content Area for a Resume</p>
				</div>

			</div>

			<!--DrawerThree END-->
	

<script type="text/javascript" src="vars.js"> </script>	
</body>

</html>

Var Collapse Code

Code:

//Syntax: var uniquevar=new animatedcollapse("DIV_id", animatetime_milisec, enablepersist(true/fase), [initialstate] )
var collapse2=new animatedcollapse("movies", 1000, true)
var collapse3=new animatedcollapse("photos", 1000, true)
var collapse4=new animatedcollapse("bio", 1000, true)

The Original 'Animated Collapsible DIV' code has been left untouched.

*edit* Any help??? I would be greatly appreciative. I haven't found any write-ups on this problem in the forums already.

Thread: Animated Collapsible DIV Q's!!!

Thread Tools

Search Thread

Animated Collapsible DIV (Closing Div Before Opening Another)

Bookmarks

Bookmarks

Posting Permissions