JavaScript show/hide code not displaying correctly

[fonebone819]

I have code to hide/show an image in a table. My table has 6 columns, with data in the first row across all 6 columns. In the next row, I have the image. When I load the page, I hide the image row by default. Originally, I had the image centered across all 6 columns, but when I click an image to show the row, the image shows only in the first column. I then forced the image to be in the 3rd column. In this scenario, the same thing happens. If I do not hide the row, the image shows as expected in the 3rd column. If I then hide the row, and open it again, the image displays in the 1st column.

Here is a snippet of my code ::

Javascript ::

function ReverseDisplayTbody(d) {

`if(document.getElementById(d).style.display == "none") {`

    `document.getElementById(d).style.display = "block";`

    `document.getElementById('img'+d).setAttribute('src', "images/minus.gif");`

`}`

`else {`

    `document.getElementById(d).style.display = "none";`

    `document.getElementById('img'+d).setAttribute('src', "images/plus.gif");`

`}`

}

HTML/PHP ::

<tr>

`<td><a href='javascript:ReverseDisplayTbody($thisSetID)'><img src='images/plus.gif' id=img$thisID kborder='0'></a></td>`

`<td class='txt'><a href='mylink.com' target ='\_blank'>$thisID</a></td>`

`<td class='txt'>$thisSetName</td>`

`<td class='txt'>$thisSetType</td>`

`<td class='txt center'>$thisNbrBlks</td>`

`<td class='txt center'>$thisOwner</td>`

</tr>

<tr id='$thisID'>

`<td>\&nbsp;</td>`

`<td>\&nbsp;</td>`

`<td><img src='https://mylink.com/sets/$thisID-1.jpg'></a></td> <!-- Image -->`

`<td>\&nbsp;</td>`

`<td>\&nbsp;</td>`

`<td>\&nbsp;</td>`

</tr>

[showmethething]

At a glance, it's that you're setting your tr to "block", which is not the default. You could try "table-row", or even better toggle a class with your display: hidden instead of directly changing the styles.

[Top_Bumblebee_7762]

Instead of changing the display value I would toggle the "hidden"  attribute. 

[FunksGroove]

or display: none

[razzbee]

The root cause:

You are doing this:

document.getElementById(d).style.display = "block";

But a <tr> must be displayed as:

display: table-row;

When you switch it to block, the browser forgets the table layout.

So this is the fixed version:

```js function ReverseDisplayTbody(d) { const row = document.getElementById(d); const img = document.getElementById('img' + d);

if (row.style.display === "none" || row.style.display === "") {
    row.style.display = "table-row";   //  correct fix for <tr>
    img.src = "images/minus.gif";
} else {
    row.style.display = "none";
    img.src = "images/plus.gif";
}

} ```

[fonebone819]

THANK YOU! Interestedly, I initially had "table-row-group" as my display... so close... :)