Pure Javascript code to toggle a div

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
infomamun
Forum Contributor
Posts: 102
Joined: Mon Dec 28, 2009 7:48 pm

Pure Javascript code to toggle a div

Post 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????
User avatar
requinix
Spammer :|
Posts: 6617
Joined: Wed Oct 15, 2008 2:35 am
Location: WA, USA

Re: Pure Javascript code to toggle a div

Post 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).
infomamun
Forum Contributor
Posts: 102
Joined: Mon Dec 28, 2009 7:48 pm

Re: Pure Javascript code to toggle a div

Post 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.
User avatar
requinix
Spammer :|
Posts: 6617
Joined: Wed Oct 15, 2008 2:35 am
Location: WA, USA

Re: Pure Javascript code to toggle a div

Post 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.
infomamun
Forum Contributor
Posts: 102
Joined: Mon Dec 28, 2009 7:48 pm

Re: Pure Javascript code to toggle a div

Post by infomamun »

Thanks requinix..I already did it.
Post Reply