CODEWITHSUNDEEP
javascript
Aly_Elgahy
Aly_Elgahy

Reputation: 189

JavaScript toggle

I made a JavaScript function to hide a link on click of button and its work here the function

    <script type="text/javascript">
function toggle() 
{
    var ele = document.getElementById("yui-gen1");
    var text = document.getElementById("windows");
    if(ele.style.display == "block") {
            ele.style.display = "none";
    }
    else {
        ele.style.display = "block";
    }
} 
</script>

But when it hidea the next link replace its place. I want nothing to replace its place, I want its place after the hiding to be just empty. Is there any way to do that?

Upvotes: 0

Views: 257

Answers (2)

James Allardice
James Allardice

Reputation: 166061

Assuming I've understood your question correctly, your problem is that display:none causes the affected element to take up no space in the document. What you need is the visibility property, which hides the affected element but keeps it's space in the document:

ele.style.visibility = "hidden";

and

ele.style.visibility = "visible";

should work, instead of display.

Upvotes: 3

sidogg
sidogg

Reputation: 199

Try setting visibility instead. Visibility will still take up the space that the button occupied, it just won't show it. Display removes it altogether so the space will be taken up by the next element.

Upvotes: 0

Related Questions