<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?
使用display
:
document.getElementById("table").style.display = (display == 'none') ? '' : 'none';
使用display:table
和display:none
代替visibility:hidden/visible
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';
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.