Div Animation JS Effect

luxuri · 10-21-2012, 12:06 PM

Hi all, I am new here and I am working on project for school. I want to create a button and when you press it, it will run this JS such that a div will appear. I am using this so that when you press on a button in my navigation bar, a div will appear below, similar to the iOS folder effect. This is so that the info in the div will not be visible when you first load the page, without pressing the button. However, my project does not really include javascript and I understand learning javascript is very difficult, which I simply do not have time for. Thus I have found a tutorial online which creates this effect, exactly what I want.

The code works flawlessly, and I enjoy the effect very much. However, the button which I press only acts as one function, so that when it opens, I must click a button and when I close it, I must click another button which I do not want. Since I am trash in javascript I cannot figure out how to do so.

Here is the javascript code which allows the effect:

Code:

<script>
	jQuery(document).ready(function() {
		$('.open-button').click(function() {
			$('.page-split-wrap').css({'display': 'block'})
			$('.page-split-wrap').animate({height: '250px'}, 500);
	});

		$('.close-button').click(function() {
			$('.page-split-wrap').animate({height: '0px'}, 500, function() {
			$('.page-split-wrap').css({'display': 'none'});
		});
		});
	})
	</script>

and here is part of the HTML code

Code:

div class="button open-button"><a href="#"><p>Open</p></a></div>
			</p>
	</div>
		<div class="page-split-wrap">
			<div class="page-split-head"> </div>
	<div class="page-split-content">
					<p class="inside">Content in here</p>
					<div class="button close-button"><a href="#"><p>Close</p></a></div>
				</div>

I've been looking at this code for a long time and I can't figure it out. I tried thinking about the if and else tags, however I don't know how to correctly place and code it for it to work.

If you need any other codes please reply, I desperately need help.

Thanks in advance.

VIPStephan · 10-21-2012, 12:43 PM

You’re on the right track with conditionals (if/else statements (not “tags”)) already. Here is a thought-provoking impulse:

Assign a specific class to the div when it’s open and check for its presence on click of the button. If it is present, you know that the div is open and you have to close it.

Something like:

Code:

open-button -> click:
  if(div has class) {
    execute functions to close div and remove the class
  }
  else {
    execute functions to open div and add class
  }

And by the way: in jQuery you can chain functions; and also, a simpler way to write css('display','block'); is just show(). If you wanna get more fancy you can use fadeIn() (and fadeOut(), of course).

Code:

$('.page-split-wrap').show().animate({height: '250px'}, 500);

vwphillips · 10-21-2012, 01:28 PM

no JQUERY solution?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/

#page-split-wrap {
  position:relative;display:none;overflow:hidden;width:100px;height:0px;border:solid red 1px;
}

/*]]>*/
</style>

<script  type="text/javascript">
/*<![CDATA[*/

function Toggle(id,close,open,ms){
 var obj=document.getElementById(id),o=Toggle['zxc'+id],to;
 if (!o&&obj){
  Toggle['zxc'+id]=o={
   obj:obj,
   now:0,
   ms:500,
   ud:true
  }
 }
 if (o){
  ms=typeof(ms)=='number'?ms:o.ms;
  obj.style.display='block';
  to=o.ud?open:close;
  clearTimeout(o.dly);
  animate(o,o.now,to,new Date(),ms*Math.abs((to-o.now)/open));
  o.ud=!o.ud;
 }
}

function animate(o,f,t,srt,mS){
 var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
 if (isFinite(now)){
  o.now=Math.max(now,0);
  o.obj.style.height=o.now+'px';
 }
 if (ms<mS){
  o.dly=setTimeout(function(){ oop.animate(o,f,t,srt,mS); },10);
 }
 else {
  o.now=t;
  o.obj.style.height=o.now+'px';
  if (t==0){
   o.obj.style.display='none';
  }
 }
}


/*]]>*/
</script>
</head>

<body>
 <div class="button open-button" onmouseup="Toggle('page-split-wrap',0,250,500);" ><p>Toggle</p></div>

 <div id="page-split-wrap">
  <div class="page-split-head"> </div>
  <div class="page-split-content">
   <p class="inside">Content in here</p>
   <p class="inside">Content in here</p>
  </div>
 </div>

</body>

</html>

luxuri · 10-28-2012, 11:50 AM

Hi guys, thanks for the help.

I tried to go with vwphillips suggestion, thus I copied the code and made a few adjustments and created a new document.

It worked flawlessly, the way I wanted it. Once again, thanks for your help.

However, after loading it on my webpage, I realized that when the button is pressed and executed, it appears over my website.

Is there a way to make it push the rest of the website(i.e. the part of the website which is below the navigation)?

Sorry for all the hassle, but I forgot to include that part in my original post.