вопрос по JavaScript и CSS

12K

03 апреля 2007 года

20 / / 05.06.2006

Здравствуйте. На html-странице есть несколько div'ов с таблцами, при нажатии на картинку таблица появляется/исчезает. Когда таблица исчезает на ее месте остается пустое место, как сделать так, чтобы все нижние html-элементы сдвигались на пустое место? Вот код:

Свернуть исходник

Код:

<html>
<head>
<script language = "Javascript">

    function showhide( group )

    {

         var crIE = (document.all && !document.getElementById && !navigator.userAgent.match(/Opera|Konqueror|Safari/i) ? true : false);

    var divobj = document.getElementById(group);

    var dheight;

    var visToSet;


    if (divobj.style.visibility == 'hidden') {

        visToSet = 'visible';

        if (crIE) {         

            dheight = 0+"px";

            divobj.style.width = 'auto';

        } else {            

            dheight = 'auto';

            divobj.style.overflow = "visible";

        }

        document.getElementById(group + '_img').src = 'minus.gif';

    } else {

        visToSet = 'hidden';

        if (crIE) {

            divobj.style.width = 0+"px";

            dheight = 1+"px";

        } else {

            dheight = 0+"px";

        }

        divobj.style.overflow = 'hidden';

        document.getElementById(group + '_img').src = 'plus.gif';

    }    

    divobj.style.height = dheight;

    divobj.style.visibility = visToSet; 

    

    

    }
</script>
</head>
<body>
<div>
<img src = "minus.gif" id = "1_img" onclick = "java script:showhide('1');">kasldjksaljldl
<table id = "1" style = "visibility:visible;">
<tr><td>a</td><td>b</td></tr>
<tr><td>aa</td><td>bb</td></tr>
</table>
</div>
<div>
<img src = "minus.gif" id = "2_img" onclick = "java script:showhide('2');">kasldjksqweqwealjldl
<table id = "2" style = "visibility:visible;">
<tr><td>a</td><td>b</td></tr>
<tr><td>aa</td><td>bb</td></tr>
</table>
</div>
<div>
<img src = "minus.gif" id = "3_img" onclick = "java script:showhide('3');">kasldjkwqeqwesaljldl
<table id = "3" style = "visibility:visible;">
<tr><td>a</td><td>b</td></tr>
<tr><td>aa</td><td>bb</td></tr>
</table>
</div>
</body>
</html>