Page 1 of 1

Pure Javascript code to toggle a div

Posted: Sun Feb 17, 2013 10:07 am
by infomamun
Hi there,
I want to toggle a div element onclick a button. But I am unable to do it although I have code to slideup or slidedown a div element seperately. Here is my code for slidedown a div:

Code: Select all

<!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">

<head>
  <title></title>
  <STYLE TYPE="text/css">
  #content{
width: 320px;
height: 0.1em;
background-color: #FF3333;
overflow:hidden;
display: block;
visibility: hidden;
}
  </STYLE>
  <script type="text/javascript">
var inter;var hh=0;
function toggleContent() {

  var obj = document.getElementById("content");
  if(hh==80)
     {
     clearInterval(inter);
     return;
     }
  obj.style.visibility = 'visible';
   hh+=2;
   obj.style.height = hh + 'px';




}
</script>
</head>

<body>
 <div ID="content">This is content.</div>
 <button onclick="inter=setInterval('toggleContent()',3);">Toggle</button>
</body>

</html>

and here is my code to slideup a div content

Code: Select all

<!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">

<head>
  <title></title>
  <STYLE TYPE="text/css">
  #content{
width: 320px;
height: 100px;
background-color: #FF3333;
overflow:hidden;
display: block;
visibility: show;
}
  </STYLE>
  <script type="text/javascript">
var inter;var hh=100;
function toggleContent() {

  var obj = document.getElementById("content");
  if(hh==2)
     {
     obj.style.visibility = 'hidden';
     obj.style.height = '0.1em';
     clearInterval(inter);
     return;
     }
     hh-=2;
     obj.style.height = hh + 'px';
}
</script>
</head>

<body>
 <div ID="content">This is content.</div>
 <button onclick="inter=setInterval('toggleContent()',3);">Toggle</button>
</body>

</html>

But I want to combine these two functions into one so that it can toggle the div on each click.
I am very weak in javascript and don't want to use jquery only for this function. Any help????

Re: Pure Javascript code to toggle a div

Posted: Sun Feb 17, 2013 3:53 pm
by requinix
First step is to create a function that resizes in general. You pass in as an argument what dimension it should go to. It then hh+=2 or hh-=2 appropriately until it reaches (or passes) the desired height.

Once that's done you create another function that will control toggling. It doesn't need any arguments, besides perhaps for the object you're resizing. It looks at some variable and decides whether to call the first function with a small number (to shrink) or a large number (to grow).

Re: Pure Javascript code to toggle a div

Posted: Sun Feb 17, 2013 9:14 pm
by infomamun
Thanks requinix,
but I will be unable to do anything without a sample code because I am very weak in javascript. Please show me some code.

Re: Pure Javascript code to toggle a div

Posted: Sun Feb 17, 2013 11:37 pm
by requinix
Then this is the perfect opportunity to start learning. Do you understand what those two bits of code do? Try just reading the code as if it were English.

Re: Pure Javascript code to toggle a div

Posted: Tue Feb 19, 2013 11:22 pm
by infomamun
Thanks requinix..I already did it.