Question

I’m making a form that has a checkbox that if checked will slide down some more options, and unchecked it will slide up.

The call to the function works one round I.E. slide down on check and up on uncheck but wont slide back up.

Please help me figure out how to make this work.

**NOTE: I don’t know jQuery and don’t want to invest the time to learn it at this point.

<form>
<table>
rows and cells here
THIS IS THE CHECKBOX TO SHOW HIDDEN TABLE --> <input type="checkbox" name="booking" class="field" value="booking" onclick="show_booking('booking',200,5)"/> Check here for booking
</table>
<table id="booking">
HIDDEN rows and cells here
</table>
</form>

JAVASCRIPT***

function show_booking(obj, heightOpen, heightClose){
    if(document.getElementById(obj).style.height <= 6 ){
        animateDown(document.getElementById(obj),heightOpen);
    }
    else {
        animateUp(document.getElementById(obj), heightClose);
        
    }
}

function animateDown(obj, height){
    
       var obj_height = obj.clientHeight;
       
       if(obj_height >= height){ return;}               
       else {
           obj.style.height = (obj_height + 5) + "px";
           setTimeout(function(){
               animateDown(obj, height);
           }, 25)
       }
}
    

function animateUp (obj, height){

       var obj_height = obj.style.height.substring(0,2);
        if(obj_height >= height){    obj.style.height = (obj_height - 5) + "px";
           setTimeout(function(){
               animateUp(obj, height);
           }, 200)}   
       else { return; }         
       }    

Answer 1

You’re really trying to act based on whether the checkbox is checked, so why not use the checkbox’s checked property:

<input onclick="show_booking.apply(this, ['booking', 200, 5])" type="checkbox" name="booking" class="field" value="booking" 

apply sets the this value inside of the function to the first argument. So inside of show_booking this will be the checkbox that was just clicked. Now you can more simply write the function like:

function show_booking(obj, heightOpen, heightClose){
    if(this.checked) {
        animateDown(document.getElementById(obj),heightOpen);
    } 
    else {
        animateUp(document.getElementById(obj), heightClose);
    }
}