CODEWITHSUNDEEP
javascript
Roberto Heringer
Roberto Heringer

Reputation: 33

Change javascript show/hidden text function

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>

Upvotes: 3

Views: 830

Answers (3)

stackoverfloweth
stackoverfloweth

Reputation: 6917

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'; 
    }
}

Upvotes: 1

David
David

Reputation: 529

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

Upvotes: 1

Cortez90
Cortez90

Reputation: 87

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

Upvotes: 0

Related Questions