Display

[arpan_de]

A Form has three checkboxes. When a checkbox is checked, 3 textboxes become visible just below the checked checkbox. So for e.g. if the 2nd checkbox is checked, 3 textboxes will become visible under the 2nd checkbox. Next if the 1st checkbox is checked, 3 textboxes will become visible under the 1st checkbox. There's a horizontal line below the textboxes which always remains visible irrespective of whether any set of 3 textboxes is visible or not.When any of the checkboxes is unchecked, the 3 textboxes corresponding to the unchecked checkbox gets hidden.

What I want is when none of the 3 checkboxes are checked, the horizontal line should be seen just below the 3 checkboxes (none of the textboxes are visible now since all the checkboxes are unchecked) but if any of the checkboxes is clicked, I want the horizontal line to move further down so as to accomodate the 3 textboxes corresponding to the checked checkbox.

Also note that the 3 checkboxes make the 1st row of a HTML table (one checkbox in each of the 3 cells) & the textboxes make the 2nd row of the table. The 2nd row has 3 cells as well. So when the 1st checkbox is checked, the 3 textboxes within the 1st cell of the 2nd row become visible. Similarly, when the 3rd checkbox is checked, the 3 textboxes within the 3rd cell of the 2nd row become visible. The id of the 2nd row of the HTML table is trMain. Apart from this, each set of 3 textboxes is wrapped within 3 different <div> tags. This is how I am trying to position the horizontal line depending upon whether any of the 3 sets of textboxes is visible or not:

function showHideMast(){
    if(document.forms[0].chkMast.checked==true){
        dvMast.style.visibility="visible"
        document.getElementById("trMain").style.display="inline"
    }
    else{
        dvMast.style.visibility="hidden"
        for(i=0;i<document.forms[0].length;i++){
            if(document.forms[0].type=="checkbox"){
                if(document.forms[0].checked){
                    document.getElementById("trMain").style.display="inline"
                }
                else{
                    document.getElementById("trMain").style.display="none"
                }
            }
        }
    }
}
function showHideBach(){
    if(document.forms[0].chkBach.checked==true){
        dvBach.style.visibility="visible"
        document.getElementById("trMain").style.display="inline"
    }
    else{
        dvBach.style.visibility="hidden"
        for(i=0;i<document.forms[0].length;i++){
            if(document.forms[0].type=="checkbox"){
                if(document.forms[0].checked){
                    document.getElementById("trMain").style.display="inline"
                }
                else{
                    document.getElementById("trMain").style.display="none"
                }
            }
        }
    }
}
function showHideHSec(){
    if(document.forms[0].chkHSec.checked==true){
        dvHSec.style.visibility="visible"
        document.getElementById("trMain").style.display="inline"
    }
    else{
        dvHSec.style.visibility="hidden"
        for(i=0;i<document.forms[0].length;i++){
            if(document.forms[0].type=="checkbox"){
                if(document.forms[0].checked){
                    document.getElementById("trMain").style.display="inline"
                }
                else{
                    document.getElementById("trMain").style.display="none"
                }
            }
        }
    }
}

dvMast is the id of the <div> tag that wraps the 1st set of 3 textboxes within the 1st cell of the 2nd row of the HTML table. dvBach is the id of the <div> tag that wraps the 2nd set of 3 textboxes within the 2nd cell of the 2nd row of the HTML table & dvSec is the id of the <div> tag that wraps the 3rd set of 3 textboxes within the 3rd cell of the 2nd row of the HTML table.

As such the above code works fine but there's a problem. When any of the checkboxes is checked, the horizontal line moves down to accomodate the 3 textboxes but after checking any or all of the checkboxes, if all the 3 checkboxes are unchecked (meaning none of the 3 sets of textboxes are visible), then the horizontal line doesn't move up to the same position that it had occupied when none of the checkboxes were checked.

Can someone please point out what am I missing from the code which is not making the horizontal line to move up when none of the checkboxes are checked?

Note that showHideMast() is the onClick event function of the 1st checkbox. showHideBach() is the onClick event function of the 2nd checkbox & finally showHideHSec() is the onClick event function of the 3rd checkbox

Thanks,

Arpan

[david_kw]

Can you show a link to this page?

I can speculate without one but seeing the page in action would be useful.

My speculation is that it has something to do with the way you are hiding the textboxes. In CSS if you set visibility to hidden it makes the object invisible but it still keeps the space in the layout for it. If you set the display to none it makes the object invisible and reformats the page without that object. My guess is somehow the first state the textboxes are in has them with display: none. So when they are displayed then the line moves down to accommadate the new elements. Then when you hide them you are setting visibility: hidden which leaves a space for them. So try switcing where you set visibility: hidden to display: none instead.

david_kw