Change javascript show/hidden text function

Question

It works... but i want to change the default to hidden. Click first time to show the hidden text

<script>
function displayRow(itemID){
    if ((document.getElementById(itemID).style.display == 'block')) {
        document.getElementById(itemID).style.display = 'display';
    } else { 
        document.getElementById(itemID).style.display = 'display'; 
    }
}
</script>

<button onclick="displayRow('1')">Show/Hidden text</button>

You can just add style="display: hidden;" to your element, or a class which has that trait by default — Ayrton
– Ayrton, Commented Oct 29, 2019 at 14:41
document.getElementById(itemID).style.display = 'display'; This doesn't do anything, i.e. display: display is not valid CSS. document.getElementById(itemID).style.display = 'none'; would be better (or use visibility or opacity instead) — adr5240
– adr5240, Commented Oct 29, 2019 at 14:54

David · Accepted Answer · 2019-10-29 14:51:26Z

1

function displayRow(itemID){
    if ((document.getElementById(itemID).style.display == 'none')) {
        document.getElementById(itemID).style.display = 'block';
    } else { 
        document.getElementById(itemID).style.display = 'none'; 
    }
}

<table>
<tr style="display:none" id="1">
<td>Test</td>
</tr>
</table>
<button onclick="displayRow('1')">Show/Hidden text</button>

Use "none" instead "hidden", and put style="display: none" to the element which want to hide by default

answered Oct 29, 2019 at 14:51

David

5293 silver badges11 bronze badges

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

1 Comment

Roberto Heringer Over a year ago

Perfect! Thank you!

stackoverfloweth · Accepted Answer · 2019-10-29 15:03:59Z

1

Simply set your display to hidden by default

<button style='display: hidden;' onclick="displayRow('<? echo $element ?>')" class='no-print'>Show/Hidden text</button>

and the js

function displayRow(itemID){
    var el = document.getElementById(itemID);
    if ((el.style.display == 'hidden')) {
        el.style.display = 'block';
    } else { 
        el.style.display = 'hidden'; 
    }
}

edited Oct 29, 2019 at 15:03

answered Oct 29, 2019 at 14:42

stackoverfloweth

6,9275 gold badges44 silver badges75 bronze badges

Comments

Cortez90 · Accepted Answer · 2019-10-29 14:47:07Z

0

function displayRow(itemID){
  if (document.getElementById(itemID).style.display == 'block') {
    document.getElementById(itemID).style.display = 'none';
  } else { 
    document.getElementById(itemID).style.display = 'block'; 
  }
}

answered Oct 29, 2019 at 14:47

Cortez90

873 bronze badges

1 Comment

jtate Over a year ago

Welcome to stackoverflow. In addition to the code you've provided, please consider giving a summary as to why and how this solves the issue.

Collectives™ on Stack Overflow

Change javascript show/hidden text function

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related