Toggling sliding panels problem (showing & hiding content with radio buttons)

**SlyOne** · 02-20-2009, 05:32 PM

Hi,

New to these forums so apologise if this is somewhere else, but I recently found this tutorial which matched pretty much what i needed on my website that i am developing for a uni project.

Anyway, I am now trying to adapt this script to a section of my site where a user is able to answer questions with checking a yes or no radio button

If the user checks a yes radio button then this toggles a slide animation which makes visible some content (another question and after that one a set of answers). Anyway, I am able to get this working for one question only.

The first question being:
Would you like a course of study involving works of art or antiques?
and user selects yes radio button and the hidden div content is shown. However if you click yes again its hides (which i do not want) and if you click no it doesnt do anything when i want it to hide the content while the yes radio button makes it visible.

So, was wondering if someone could take a look at my code and see if you can make any sense of why its not working as i hope it to (my javascript knowledge is incredibly limited and am learning at the moment).

Below is the html part:

Code:

<script type="text/javascript" src="jquery/SOTC-Inline_Sliding_Panels.js"></script>

<body>
<div>
  <p>
    <label>Would you like a course of study involving works of art or antiques?</label>
    <div id="exampleHeader">
      <label>Yes: </label> <input name="courseGroup" type="radio" class="radio" id="courseGroup" onclick="runAnimation(animationObject, this)">
   </div>
   <label>No: </label> <input name="courseGroup" type="radio" class="radio" id="courseGroup" onclick="runAnimation(animationObject, this)"/>
</p>
<div id="dropdownPanel"
      style="position:relative;
           width:550px;
           height:1px;
           top:-1px;
           left:0px;
           background:#ccc;
           overflow:hidden;
           z-index:0;"> 
           
           <label>Would you consider a course in the histroy of art, architecture or design?</label>
            <label>Yes: </label> <input name="courseGroup" type="radio" class="radio" id="courseGroup">
            <label>No: </label> <input name="courseGroup" type="radio" class="radio" id="courseGroup"/></div>
            
            <p>
            
    <label>Are you interested in industrial product managment?</label>
    <div id="exampleHeader">
      <label>Yes: </label> <input name="courseGroup" type="radio" class="radio" id="courseGroup" onclick="runAnimation(animationObject, this)">
   </div>
   <label>No: </label> <input name="courseGroup" type="radio" class="radio" id="courseGroup"/>
</p>
<div id="dropdownPanel"
      style="position:relative;
           width:550px;
           height:1px;
           top:-1px;
           left:0px;
           background:#ccc;
           overflow:hidden;
           z-index:0;"> 
           
            <label>Would you have a job in the financial section of an organisation?</label>
            <label>Yes: </label> <input name="courseGroup" type="radio" class="radio" id="courseGroup" onclick="runAnimation(animationObject, this)">
            <label>No: </label> <input name="courseGroup" type="radio" class="radio" id="courseGroup"/></div>



</div>

below is the javascript part which is in fact inside the html document at the moment:

Code:

<script type="text/javascript">
var animationObject = new AnimationObject('dropdownPanel');
animationObject.AddFrame(new AnimationFrame(0, -1, 550, 200, 500));

function runAnimation(animation, header)
{
  if(header.expanded)
  {
    animation.RunBackward();
    header.expanded = false;
  }
  else
  {
    animation.RunForward();
    header.expanded = true;
  }
}


</script>

and as i'm sure you've noticed there is a file that i import at the top of the html document called SOTC-Inline_Sliding_Panels.js ... this is apparently needed to make the script inside the html to work (downloaded it as part of the tutorial).
Its quite a bit of code, not sure if it is in fact needed but i will show it anyway.

Code:

function AnimationFrame(left, top, width, height, time)
{
  this.Left = left;
  this.Top = top;
  this.Width = width;
  this.Height = height;
  this.Time = time;
 
  this.Copy = function(frame)
  {
    this.Left = frame.Left;
    this.Top = frame.Top;
    this.Width = frame.Width;
    this.Height = frame.Height;
    this.Time = frame.Time;
  }
 
  this.Apply = function(element)
  {
    element.style.left = Math.round(this.Left) + 'px';
    element.style.top = Math.round(this.Top) + 'px';
    element.style.width = Math.round(this.Width) + 'px';
    element.style.height = Math.round(this.Height) + 'px';
  }
}

function AnimationObject(element)
{
  if(typeof(element) == "string")
    element = document.getElementById(element);
 
  var frames = null; 
  var timeoutID = -1;
  var running = 0;
  var currentFI = 0;
  var currentData = null;
  var lastTick = -1;
  var callback = null;
 
  var prevDir = 0;
 
  this.AddFrame = function(frame)
  {
    frames.push(frame);
  }
 
  this.SetCallback = function(cb)
  {
    callback = cb;
  }
 
  this.ClearFrames = function()
  {
    if(running != 0)
      this.Stop();
    frames = new Array();
    frames.push(new AnimationFrame(0,0,0,0,0));
    frames[0].Time = 0;
    frames[0].Left = parseInt(element.style.left);
    frames[0].Top = parseInt(element.style.top);
    frames[0].Width = parseInt(element.style.width);
    frames[0].Height = parseInt(element.style.height);
    currentFI = 0;
    prevDir = 0;
    currentData = new AnimationFrame(0,0,0,0,0);   
  }
 
  this.ResetToStart = function()
  {
    if(running != 0)
      this.Stop();
    currentFI = 0;
    prevDir = 0;
    currentData = new AnimationFrame(0,0,0,0,0);
    frames[0].Apply(element);
  }
 
  this.ResetToEnd = function()
  {
    if(running != 0)
      this.Stop();
    currentFI = 0;
    prevDir = 0;
    currentData = new AnimationFrame(0,0,0,0,0);
    frames[frames.length - 1].Apply(element);
  }
 
  this.Stop = function()
  {
    if(running == 0)
      return;
    if(timeoutID != -1)
      clearTimeout(timeoutID);
    prevDir = running;
    running = 0;
  }
 
  this.RunForward = function()
  {
    if(running == 1)
      return;
    if(running == -1)
      this.Stop();
    if(frames.length == 1 || element == null)
      return; 
     
    lastTick = new Date().getTime();

    //Start from the begining
    if(prevDir == 0)
    {
      currentFI = 1;
      currentData.Time = 0;
      currentData.Left = parseInt(element.style.left);
      currentData.Top = parseInt(element.style.top);
      currentData.Width = parseInt(element.style.width);
      currentData.Height = parseInt(element.style.height);
      frames[0].Copy(currentData);
    }
    else if(prevDir != 1)
    {
      currentFI++;
      currentData.Time =
          frames[currentFI].Time - currentData.Time;
    }
     
    running = 1;
    animate();
  }
 
  this.RunBackward = function()
  {
    if(running == -1)
      return;
    if(running == 1)
      this.Stop();
    if(frames.length == 1 || element == null)
      return;
       
    lastTick = new Date().getTime();
   
    //Start from the end
    if(prevDir == 0)
    {
      currentFI = frames.length-2;
      currentData.Left = parseInt(element.style.left);
      currentData.Top = parseInt(element.style.top);
      currentData.Width = parseInt(element.style.width);
      currentData.Height = parseInt(element.style.height);
      currentData.Time = frames[frames.length-1].Time;
      frames[frames.length-1].Copy(currentData);
      currentData.Time = 0;
    }
    else if(prevDir != -1)
    {
      currentData.Time =
          frames[currentFI].Time - currentData.Time;
      currentFI--;
    }
     
    running = -1;
    animate();
  }
   
  function animate()
  {
    if(running == 0)
      return;
    var curTick = new Date().getTime();
    var tickCount = curTick - lastTick;
    lastTick = curTick;
   
    var timeLeft =
       frames[((running == -1) ? currentFI+1 : currentFI)].Time
       - currentData.Time;
   
    while(timeLeft <= tickCount)
    {
      currentData.Copy(frames[currentFI]);
      currentData.Time = 0;
      currentFI += running;
      if(currentFI>= frames.length || currentFI <0)
      {
        currentData.Apply(element);
        lastTick = -1;
        running = 0;
        prevDir = 0;
        if(callback != null)
          callback();
        return;
      }
      tickCount = tickCount - timeLeft;
      timeLeft =
        frames[((running == -1) ? currentFI+1 : currentFI)].Time
        - currentData.Time;
    }
   
    if(tickCount != 0)
    {
      currentData.Time += tickCount;
      var ratio = currentData.Time/
        frames[((running == -1) ? currentFI+1 : currentFI)].Time;

      currentData.Left = frames[currentFI-running].Left +
         (frames[currentFI].Left
         - frames[currentFI-running].Left)
         * ratio;

      currentData.Top = frames[currentFI-running].Top +
         (frames[currentFI].Top
         - frames[currentFI-running].Top)
         * ratio;
      currentData.Width = frames[currentFI-running].Width +
         (frames[currentFI].Width
         - frames[currentFI-running].Width)
         * ratio;

      currentData.Height = frames[currentFI-running].Height +
         (frames[currentFI].Height
         - frames[currentFI-running].Height)
         * ratio;
    }
   
    currentData.Apply(element);

    timeoutID = setTimeout(animate, 33);
  }
 
  this.ClearFrames();
}

thanks for any help and apologies for the length of this topic

**vwphillips** · 02-21-2009, 10:35 AM

Code:

<div>
  <p>
    <label>Would you like a course of study involving works of art or antiques?</label>
    <div id="exampleHeader">
      <label>Yes: </label> <input name="courseGroup" type="radio" class="radio" id="courseGroup" onclick="Animate('dropdownPanel1',100);">
   </div>
   <label>No: </label> <input name="courseGroup" type="radio" class="radio" id="courseGroup" onclick="Animate('dropdownPanel1',1);"/>
</p>
<div id="dropdownPanel1"
      style="position:relative;
           width:550px;
           height:1px;
           top:-1px;
           left:0px;
           background:#ccc;
           overflow:hidden;
           z-index:0;">

           <label>Would you consider a course in the histroy of art, architecture or design?</label>
            <label>Yes: </label> <input name="courseGroup" type="radio" class="radio" id="courseGroup">
            <label>No: </label> <input name="courseGroup" type="radio" class="radio" id="courseGroup"/></div>

            <p>

    <label>Are you interested in industrial product managment?</label>
    <div id="exampleHeader">
      <label>Yes: </label> <input name="courseGroup" type="radio" class="radio" id="courseGroup" onclick="Animate('dropdownPanel2',100);">
   </div>
   <label>No: </label> <input name="courseGroup" type="radio" class="radio" id="courseGroup" onclick="Animate('dropdownPanel2',1);"/>
</p>
<div id="dropdownPanel2"
      style="position:relative;
           width:550px;
           height:1px;
           top:-1px;
           left:0px;
           background:#ccc;
           overflow:hidden;
           z-index:0;">

            <label>Would you have a job in the financial section of an organisation?</label>
            <label>Yes: </label> <input name="courseGroup" type="radio" class="radio" id="courseGroup" onclick="runAnimation(animationObject, this)">
            <label>No: </label> <input name="courseGroup" type="radio" class="radio" id="courseGroup"/></div>



</div>

Code:

// Basic Element Animator (29-December-2008) DRAFT
// by Vic Phillips http://www.vicsjavascripts.org.uk

// To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time.
// With three types of progression 'sin' and 'cos' and liner.

// **** Application Notes

// **** The HTML Code
//
// when moving an element the inline or class rule style position of the element should be assigned as
// 'position:relative;' or 'position:absolute;'.
//
// The element would normally be assigned a unique ID name.
//

// **** Executing the Effect(Script)
//
// The effect is executed by an event call to function 'zxcBAnimator('width#',document.getElementById('tst'),10,800,5000,[10,800],'sin');'
// where:
// parameter 0 = the mode(see Note 2).                                                                     (string)
// parameter 1 = the unique ID name or element object.                                                     (string or element object)
// parameter 2 = the start position of the effect.                                                         (digits, for opacity minimum 0, maximum 100)
// parameter 3 = the finish position of the effect.                                                        (digits, for opacity minimum 0, maximum 100)
// parameter 4 = (optional) period of time between the start and finish of the effect in milliseconds.     (digits or defaults to 2000 milliSeconds)
// parameter 5 = (optional) to scale the effect time on a secified minimum/maximum.                        (array, see Note 5)
//                 field 0 the minimum. (digits)
//                 field 1 the maximum. (digits)
// parameter 6 = (optional) the type of progression, 'sin', 'cos' or 'liner'.                              (string, default = 'liner')
//                'sin' progression starts fast and ends slow.
//                'cos' progression starts slow and ends fast.
//
//  Note 1:  The default units(excepting opacity) are 'px'.
//  Note 2:  Examples modes: 'left', 'top', 'width', 'height', 'opacity.
//           For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
//  Note 3:  To 'toggle' the effect include '#' in parameter 0.
//           The first call will set the toggle parameters.
//           Subsequent calls with '#' in parameter 0 and the same start and finish parameters will 'toggle' the effect.
//  Note 4:  The function may be re-executed with a different set of parameters (start/finish time or period)
//           whenever required, say from an onclick/mouseover/out event.
//           The period parameter will be retained unless re-specified.
//  Note 5: parameter 5 is of particular use when re-calling the effect
//          in mid travel to retain an constant rate of progression.
//
// **** Advanced Applications
//
//  It may be required to access the current value of the effect.
//  The element effect is accessible from the element property
//  element effect = elementobject[mode.replace(/\W/g,'')+'oop'];
//  where mode is parameter 0 of the initial call.
//  An array storing the current, start and finish values of the element effect may be accessed
//  from the element effect.data as fields 0, 1 and 2 respectively
//

// **** General
//
// All variable, function etc. names are prefixed with 'zxc' to minimise conflicts with other JavaScripts.
// These characters may be changed to characters of choice using global find and replace.
//
// The Functional Code(about 2.06K) is best as an External JavaScript.
//
// Tested with IE7 and Mozilla FireFox on a PC.
//



// **** Functional Code - NO NEED to Change


function zxcBAnimator(mde,obj,srt,fin,ms,scale,curve){
 if (typeof(obj)=='string'){ obj=document.getElementById(obj); }
 if (!obj||(!srt&&!fin)) return;
 var oop=obj[mde.replace(/\W/g,'')+'oop'];
 if (oop){
  clearTimeout(oop.to);
  if (oop.srtfin[0]==srt&&oop.srtfin[1]==fin&&mde.match('#')) oop.update([oop.data[0],(oop.srtfin[0]==oop.data[2])?fin:srt],ms,scale,curve);
  else oop.update([srt,fin],ms);
 }
 else obj[mde.replace(/\W/g,'')+'oop']=new zxcBAnimatorOOP(mde,obj,srt,fin,ms,scale,curve);
}

function zxcBAnimatorOOP(mde,obj,srt,fin,ms,scale,curve){
 this.srtfin=[srt,fin];
 this.to=null;
 this.obj=obj;
 this.mde=mde.replace(/\W/g,'');
 this.update([srt,fin],ms,scale,curve);
}

zxcBAnimatorOOP.prototype.update=function(srtfin,ms,scale,curve){
 this.time=ms||this.time||2000;
 this.data=[srtfin[0],srtfin[0],srtfin[1]];
 this.ms=this.time*(!scale?1:Math.abs((srtfin[1]-srtfin[0])/(scale[1]-scale[0])));
 this.curve=(typeof(curve)=='string')?curve.charAt(0).toLowerCase():(this.curve)?this.curve:'x';
 this.inc=Math.PI/(2*this.ms);
 this.srttime=new Date().getTime();
 this.cng();
}

zxcBAnimatorOOP.prototype.cng=function(){
 var ms=new Date().getTime()-this.srttime;
 this.data[0]=(this.curve=='s')?Math.floor((this.data[2]-this.data[1])*Math.sin(this.inc*ms)+this.data[1]):(this.curve=='c')?(this.data[2])-Math.floor((this.data[2]-this.data[1])*Math.cos(this.inc*ms)):(this.data[2]-this.data[1])/this.ms*ms+this.data[1];
 if (this.mde!='left'&&this.mde!='top'&&this.data[0]<0) this.data[0]=0;
 if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
 else  zxcOpacity(this.obj,this.data[0]);
 if (ms<this.ms) this.to=setTimeout(function(oop){return function(){oop.cng();}}(this),10);
 else {
  this.data[0]=this.data[2];
  if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
  else zxcOpacity(this.obj,this.data[0]);
 }
}

function zxcOpacity(obj,opc){
 if (opc<0||opc>100) return;
 obj.style.filter='alpha(opacity='+opc+')';
 obj.style.opacity=obj.style.MozOpacity=obj.style.KhtmlOpacity=opc/100-.001;
}


function Animate(id,height){
 var obj=document.getElementById(id);
  zxcBAnimator('height',obj,obj.offsetHeight,height,1000);
}

**SlyOne** · 02-21-2009, 04:31 PM

sorry mate, i'm a little confused. What have you provided me with? As i said, my javascript knowledge is incredibly brief

so need a bit of an explanation

**vwphillips** · 02-21-2009, 05:49 PM

The script expands the specified div when the Yes checkbox is clicked
and closes it when the No checkbox is clicked.

**SlyOne** · 02-21-2009, 06:54 PM

ah nice, cheers mate. Will see if i can apply it to my html. Would i also be able to put expandable/collapsible div content inside other expandable divs? As it would be two questions and then some answers. So the user answers yes to first question, another question appears, the user answers yes to that second question and then some answers appear. would that work with the provided script?

thanks for your help, its much appreciated.

**SlyOne** · 02-22-2009, 03:11 PM

Hi vwphillips,

seems i'm a bit confused again ^^ ...im unable to get your script working with my html document. This is what i've done so far on my html...not sure if i've initiated the script correctly or if i'm doing something wrong with the div id names...? Was wondering if you could give it a quick look over?

Code:

<script type="text/javascript" src="jquery/basicElementAnimator.js"></script>

<body>
<div>
  <p>
    <label>Would you like a course of study involving works of art or antiques?</label>
    <div id="exampleHeader">
      <label>Yes: </label> <input name="courseGroup" type="radio" class="radio" id="courseGroup" onclick="runzxcBAnimator(animationObject, this)">
   </div>
   <label>No: </label> <input name="courseGroup" type="radio" class="radio" id="courseGroup" onclick="runzxcBAnimator(animationObject, this)"/>
</p>
<div id="dropdownPanel"
      style="position:relative;
           width:550px;
           height:1px;
           top:-1px;
           left:0px;
           background:#ccc;
           overflow:hidden;
           z-index:0;"> 
           
           <label>Would you consider a course in the histroy of art, architecture or design?</label>
            <label>Yes: </label> <input name="courseGroup" type="radio" class="radio" id="courseGroup">
            <label>No: </label> <input name="courseGroup" type="radio" class="radio" id="courseGroup"/></div>
            
            <p>
            
    <label>Are you interested in industrial product managment?</label>
    <div id="exampleHeader">
      <label>Yes: </label> <input name="courseGroup" type="radio" class="radio" id="courseGroup" onclick="runzxcBAnimator(animationObject, this)">
   </div>
   <label>No: </label> <input name="courseGroup" type="radio" class="radio" id="courseGroup"/>
</p>
<div id="dropdownPanel"
      style="position:relative;
           width:550px;
           height:1px;
           top:-1px;
           left:0px;
           background:#ccc;
           overflow:hidden;
           z-index:0;"> 
           
            <label>Would you have a job in the financial section of an organisation?</label>
            <label>Yes: </label> <input name="courseGroup" type="radio" class="radio" id="courseGroup" onclick="runzxcBAnimator(animationObject, this)">
            <label>No: </label> <input name="courseGroup" type="radio" class="radio" id="courseGroup"/></div>



</div>



<script type="text/javascript">


function zxcBAnimator('width#',document.getElementById('dropdownPanel'),10,800,5000,[10,800],'sin');



</script>
</body>

many thanks

**vwphillips** · 02-23-2009, 12:35 PM

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>
<script type="text/javascript">
/*<![CDATA[*/

// Basic Element Animator (29-December-2008) DRAFT
// by Vic Phillips http://www.vicsjavascripts.org.uk

// To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time.
// With three types of progression 'sin' and 'cos' and liner.

// **** Application Notes

// **** The HTML Code
//
// when moving an element the inline or class rule style position of the element should be assigned as
// 'position:relative;' or 'position:absolute;'.
//
// The element would normally be assigned a unique ID name.
//

// **** Executing the Effect(Script)
//
// The effect is executed by an event call to function 'zxcBAnimator('width#',document.getElementById('tst'),10,800,5000,[10,800],'sin');'
// where:
// parameter 0 = the mode(see Note 2).                                                                     (string)
// parameter 1 = the unique ID name or element object.                                                     (string or element object)
// parameter 2 = the start position of the effect.                                                         (digits, for opacity minimum 0, maximum 100)
// parameter 3 = the finish position of the effect.                                                        (digits, for opacity minimum 0, maximum 100)
// parameter 4 = (optional) period of time between the start and finish of the effect in milliseconds.     (digits or defaults to 2000 milliSeconds)
// parameter 5 = (optional) to scale the effect time on a secified minimum/maximum.                        (array, see Note 5)
//                 field 0 the minimum. (digits)
//                 field 1 the maximum. (digits)
// parameter 6 = (optional) the type of progression, 'sin', 'cos' or 'liner'.                              (string, default = 'liner')
//                'sin' progression starts fast and ends slow.
//                'cos' progression starts slow and ends fast.
//
//  Note 1:  The default units(excepting opacity) are 'px'.
//  Note 2:  Examples modes: 'left', 'top', 'width', 'height', 'opacity.
//           For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
//  Note 3:  To 'toggle' the effect include '#' in parameter 0.
//           The first call will set the toggle parameters.
//           Subsequent calls with '#' in parameter 0 and the same start and finish parameters will 'toggle' the effect.
//  Note 4:  The function may be re-executed with a different set of parameters (start/finish time or period)
//           whenever required, say from an onclick/mouseover/out event.
//           The period parameter will be retained unless re-specified.
//  Note 5: parameter 5 is of particular use when re-calling the effect
//          in mid travel to retain an constant rate of progression.
//
// **** Advanced Applications
//
//  It may be required to access the current value of the effect.
//  The element effect is accessible from the element property
//  element effect = elementobject[mode.replace(/\W/g,'')+'oop'];
//  where mode is parameter 0 of the initial call.
//  An array storing the current, start and finish values of the element effect may be accessed
//  from the element effect.data as fields 0, 1 and 2 respectively
//

// **** General
//
// All variable, function etc. names are prefixed with 'zxc' to minimise conflicts with other JavaScripts.
// These characters may be changed to characters of choice using global find and replace.
//
// The Functional Code(about 2.06K) is best as an External JavaScript.
//
// Tested with IE7 and Mozilla FireFox on a PC.
//



// **** Functional Code - NO NEED to Change


function zxcBAnimator(mde,obj,srt,fin,ms,scale,curve){
 if (typeof(obj)=='string'){ obj=document.getElementById(obj); }
 if (!obj||(!srt&&!fin)) return;
 var oop=obj[mde.replace(/\W/g,'')+'oop'];
 if (oop){
  clearTimeout(oop.to);
  if (oop.srtfin[0]==srt&&oop.srtfin[1]==fin&&mde.match('#')) oop.update([oop.data[0],(oop.srtfin[0]==oop.data[2])?fin:srt],ms,scale,curve);
  else oop.update([srt,fin],ms);
 }
 else obj[mde.replace(/\W/g,'')+'oop']=new zxcBAnimatorOOP(mde,obj,srt,fin,ms,scale,curve);
}

function zxcBAnimatorOOP(mde,obj,srt,fin,ms,scale,curve){
 this.srtfin=[srt,fin];
 this.to=null;
 this.obj=obj;
 this.mde=mde.replace(/\W/g,'');
 this.update([srt,fin],ms,scale,curve);
}

zxcBAnimatorOOP.prototype.update=function(srtfin,ms,scale,curve){
 this.time=ms||this.time||2000;
 this.data=[srtfin[0],srtfin[0],srtfin[1]];
 this.ms=this.time*(!scale?1:Math.abs((srtfin[1]-srtfin[0])/(scale[1]-scale[0])));
 this.curve=(typeof(curve)=='string')?curve.charAt(0).toLowerCase():(this.curve)?this.curve:'x';
 this.inc=Math.PI/(2*this.ms);
 this.srttime=new Date().getTime();
 this.cng();
}

zxcBAnimatorOOP.prototype.cng=function(){
 var ms=new Date().getTime()-this.srttime;
 this.data[0]=(this.curve=='s')?Math.floor((this.data[2]-this.data[1])*Math.sin(this.inc*ms)+this.data[1]):(this.curve=='c')?(this.data[2])-Math.floor((this.data[2]-this.data[1])*Math.cos(this.inc*ms)):(this.data[2]-this.data[1])/this.ms*ms+this.data[1];
 if (this.mde!='left'&&this.mde!='top'&&this.data[0]<0) this.data[0]=0;
 if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
 else  zxcOpacity(this.obj,this.data[0]);
 if (ms<this.ms) this.to=setTimeout(function(oop){return function(){oop.cng();}}(this),10);
 else {
  this.data[0]=this.data[2];
  if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
  else zxcOpacity(this.obj,this.data[0]);
 }
}

function zxcOpacity(obj,opc){
 if (opc<0||opc>100) return;
 obj.style.filter='alpha(opacity='+opc+')';
 obj.style.opacity=obj.style.MozOpacity=obj.style.KhtmlOpacity=opc/100-.001;
}


function Animate(id,height){
 var obj=document.getElementById(id);
  zxcBAnimator('height',obj,obj.offsetHeight,height,1000);
}
/*]]>*/
</script></head>

<body>
<div>
  <p>
    <label>Would you like a course of study involving works of art or antiques?</label>
    <div id="exampleHeader">
      <label>Yes: </label> <input name="courseGroup" type="radio" class="radio" id="courseGroup" onclick="Animate('dropdownPanel1',100);">
   </div>
   <label>No: </label> <input name="courseGroup" type="radio" class="radio" id="courseGroup" onclick="Animate('dropdownPanel1',1);"/>
</p>
<div id="dropdownPanel1"
      style="position:relative;
           width:550px;
           height:1px;
           top:-1px;
           left:0px;
           background:#ccc;
           overflow:hidden;
           z-index:0;">

           <label>Would you consider a course in the histroy of art, architecture or design?</label>
            <label>Yes: </label> <input name="courseGroup" type="radio" class="radio" id="courseGroup">
            <label>No: </label> <input name="courseGroup" type="radio" class="radio" id="courseGroup"/></div>

            <p>

    <label>Are you interested in industrial product managment?</label>
    <div id="exampleHeader">
      <label>Yes: </label> <input name="courseGroup" type="radio" class="radio" id="courseGroup" onclick="Animate('dropdownPanel2',100);">
   </div>
   <label>No: </label> <input name="courseGroup" type="radio" class="radio" id="courseGroup" onclick="Animate('dropdownPanel2',1);"/>
</p>
<div id="dropdownPanel2"
      style="position:relative;
           width:550px;
           height:1px;
           top:-1px;
           left:0px;
           background:#ccc;
           overflow:hidden;
           z-index:0;">

            <label>Would you have a job in the financial section of an organisation?</label>
            <label>Yes: </label> <input name="courseGroup" type="radio" class="radio" id="courseGroup" onclick="runAnimation(animationObject, this)">
            <label>No: </label> <input name="courseGroup" type="radio" class="radio" id="courseGroup"/></div>



</div>

</body>

</html>