javascript changing the style

Question

<script>
    function hide()
    {
        document.getElementById("xxx").style.visibility='visible';
    }
</script>
<tr>
    <td>655 3338</td>   
    <td onclick='hide()'>10-May-2013</td>       
</tr>
<tr id='xxx' style='visibility:collapse'>
    <td>655 3338</td>   
    <td>10-May-2013</td>        
</tr>

Good day to all, im a newbie in terms of coding in the language of javascript, im developing a simple hide show, a code above(piece of code) is a table when u click the table cell 10-May-2013 some how a table row below will show, and in that event, im correct? What is missing im my code is when i click again the table cell 10-May-2013 it will hide again, or back to its default style(hide or collapse for table).

score 1 · Accepted Answer · answered May 17 '13 at 03:36

1

Try

function hide(){
    if(document.getElementById("xxx").style.visibility != 'visible'){
        document.getElementById("xxx").style.visibility='visible';
    } else {
        document.getElementById("xxx").style.visibility='collapse';
    }
}

Demo: Fiddle

answered May 17 '13 at 03:36

Arun P Johny

384,651
66
527
531

so the trick is here `if(document.getElementById("xxx").style.visibility != 'visible'){` thanks Sir, amh out of the question why in javascript when i try to add two number (the number value was from a textbox``) for example the first textbox value is 1 then other is 2 the answer should be 3, but my output is 12, thx for advice – Robert john Concpcion May 17 '13 at 03:52
@RobertjohnConcpcion because it does a string concatenation, you need to convert them to a number first ex `var a = '1'; var b = '2'; var c = +a + +b;` http://stackoverflow.com/questions/8976627/how-to-add-two-strings-as-if-they-were-numbers – Arun P Johny May 17 '13 at 03:56

score 0 · Answer 2 · answered May 17 '13 at 03:58

You may be better to toggle the row's display property to "none" and "" (empty string) as display is widely supported and seems better suited here.

e.g.

<table>
  <tr><td><button onclick="hideNextRow(this);">Show/Hide next row</button>
  <tr><td>The next row
</table>

<script>

function hideNextRow(node) {

    // Get the parent row
    var row = upTo(node, 'tr');

    // If there is one, get the next row in the table
    if (row) {
        row = row.parentNode.rows[row.rowIndex + 1];
    }

    // If there is a next row, hide or show it depending on the current value
    // of its style.display property
    if (row) {
       row.style.display = row.style.display == 'none'? '' : 'none';
    }
}

// Generic function to go up the DOM to the first parent with a
// tagName of tagname
function upTo(node, tagname) {
  var tagname = tagname.toLowerCase();

  do {
    node = node.parentNode;
  } while (node && node.tagName && node.tagName.toLowerCase() != tagname) 

  // Return the matching node or undefined if not found
  return node && node.tagName && node.tagName.toLowerCase() == tagname? node : void 0;
}
</script>

javascript changing the style

2 Answers2