Jump to content

javascript toggle unable to hide content


gongpex
 Share

Recommended Posts

Hello everyone, I had create slide toggle, in javascript but the results is not same when I using JQuesry to create it, here my script :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  <head>	<title>slide interval</title>  </head>  <style type="text/css">   .press {   margin:0px auto;   width:225px;   height:27px;   border:1px solid aqua;   background-color:blue;   color:aqua;   text-align:center;   padding-top:3px;   cursor:pointer;   }     #slide {   margin:0px auto;   width:225px;   height:300px;   border:1px solid aqua;   background-color:blue;   display:none;   }  </style>   <script type="text/javascript">   var x=0;   var intHide;   var speed = 5;     function show() {	if(x<300) {	x=x+speed;	document.getElementById('slide').style.display="block";	document.getElementById('slide').style.height=+ x + "px";	}} function hide() {if(x>0) {x=x-speed;document.getElementById('slide').style.height= + x +"px";}} function interShow() {  clearInterval(intHide);  intShow = setInterval("show()",45);  } function interHide() {  clearInterval(intShow);  intHide = setInterval("hide()",45);  }  </script>   <body>	<div class="press" onclick="interShow()">Click to slide</div><div class="press" onclick="interHide()">Click to hide</div><div id="slide">Test</div>  </body></html>

when I click on "click to hide" it can hide the slide, but content inside slide (Test) unable to hide this are different when I use JQuery slideToggle, I using javascript to test my knowledge please someone tell me how to hide the slide content Thanks

Link to comment
Share on other sites

I believe because you still have it display as block. You have to display it as 'none' once it's done sliding back up. Check out the code below that I added to the hide function:

function hide(){      if(x>0)      {          x=x-speed;          document.getElementById('slide').style.height = + x +"px";              if(document.getElementById('slide').style.height == 0 + "px") // you could have also/instead: if(x == 0)                {                     document.getElementById('slide').style.display = "none";                 }       }}

Edited by Don E
Link to comment
Share on other sites

this works, thanks for you all. but, Can I create this object so that look more good, such if I using JQuery? because when it clicked the slide looks rather rigid, different when using JQuery like this : http://www.w3schools...ry_slide_toggle What should I add on my script? please answer me thanks

Edited by gong
Link to comment
Share on other sites

Well IMO, its good to learn how to do these things on your own first.. Yes it's rigid a bit but that's okay at first. It's all about the timing and speed working in conjunction with the height for that particular element. Just keep tweaking it, messing with it until you get it perfect, or at least some what smooth. Play with the setInterval timing, speed, etc until you get it more smooth-like. jQuery is written by JavaScript pros I'm sure, so don't compare yourself too much to them(yet). Along time ago, they were in the same boat once as you/us. ;)

Link to comment
Share on other sites

jQuery is written by JavaScript pros I'm sure, so don't compare yourself too much to them(yet). Along time ago, they were in the same boat once as you/us. ;)
so I don't need to add something just play on timing and setInterval.__________________________________________________________________________________________________________________________________________ I never compare my self with one of them, I ask this question just for learn by myself, because I think all of you who in w3schools are professional ,so I ask question and learn from you all.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...