Javascript: toggle loading InnerHTML

Question

<script>
    function toggle_table() {
        visibility = document.getElementById("table").style.visibility;
        document.getElementById("table").style.visibility = (visibility == 'visible') ? 'hidden' : 'visible';
        document.getElementById("toggle_table").innerHTML = (visibility == 'visible') ? 'Open' : 'Close';
    }
</script>

<form method='POST'>
    <a id='toggle_table' href='#' onClick='toggle_table()'>Open</a> WIJZIGEN PROCES
    <table id='table' style='visibility: hidden'>
    </table>
</form>

This works great. Though I don't want to just make it invisible, I want to not render the innerHTML (so it won't take it's space when invisible). Similar to this question, though I cannot make use of JQuery (requirements). Is this in a rather simple way with plain JavaScript, without the need of putting the whole HTML-content in Javascript?

use display:none to hide it from DOM, not visibility

kennypu
– kennypu

2013-03-15 10:37:24 +00:00
Commented Mar 15, 2013 at 10:37 — kennypu
– kennypu, Commented Mar 15, 2013 at 10:37

Kernel James · Accepted Answer · 2013-03-15 10:36:52Z

1

Use display:

document.getElementById("table").style.display = (display == 'none') ? '' : 'none';

answered Mar 15, 2013 at 10:36

Kernel James

4,1421 gold badge32 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Menno Over a year ago

Thanks, you were right. This appears to be a CSS issue, not JS. Will accept as soon as possible.

The Alpha · Accepted Answer · 2013-03-15 10:37:40Z

0

You may try this using display property

function toggle_table() {
    display = document.getElementById("table").style.display;
    document.getElementById("table").style.display= (display != 'none') ? 'none' : 'table';
    document.getElementById("toggle_table").innerHTML = (display== 'table') ? 'Open' : 'Close';
}

answered Mar 15, 2013 at 10:37

The Alpha

147k30 gold badges294 silver badges313 bronze badges

Comments

Anders R. Bystrup · Accepted Answer · 2013-03-15 10:56:49Z

0

Use display:table and display:none instead of visibility:hidden/visible

edited Mar 15, 2013 at 10:56

Anders R. Bystrup

16.1k11 gold badges65 silver badges59 bronze badges

answered Mar 15, 2013 at 10:36

user887675

5572 silver badges6 bronze badges

Collectives™ on Stack Overflow

Javascript: toggle loading InnerHTML

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related