スライド要素はスライドしません

Question

こんにちは私は、チェックされた場合にさらにいくつかのオプションをスライドさせるチェックボックスを持つフォームを作成しています。そして、チェックされていないそれはスライドします

関数への呼び出しは1ラウンドで動作します。つまり、チェックで下にスライドしてアンチェックで上下しますが、バックアップしません

この作品の作り方を理解するのを手伝ってください。

**注：私はjQueryを知らないので、この時点でそれを学ぶために時間を投資したくありません。

<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

チェックボックスがチェックされているかどうかに基づいて実際に行動しようとしているので、チェックボックスのチェックされたプロパティを使用してみませんか。

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

apply を設定します this 関数内の最初の引数への値。だから show_booking this クリックされたばかりのチェックボックスになります。これで、次のような関数をより簡単に書くことができます。

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