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).

Arun P Johny · Accepted Answer · 2013-05-17 03:36:49Z

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, 2013 at 3:36

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

2 Comments

Robert john Concpcion Over a year ago

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<input type='text'>) 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

Arun P Johny Over a year ago

@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; stackoverflow.com/questions/8976627/…

RobG · Accepted Answer · 2013-05-17 03:58:12Z

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>

Collectives™ on Stack Overflow

javascript changing the style

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related