toggle issue between grids

Question

I have two jqgrids. At a time only one should be visible. For this I tried toggling like this.At a time only one grid should be displayed. For board grid, it works fine. But for list grid, both the grids are displayed.

.jsp
<tr valign="top" id="message" style="display: block;" >
                    <td align="left">
                        <%@ include file="grid1.jsp" %>
                    </td>
                </tr>
<tr valign="middle" id="task" style="display: none;" >
                    <td align="left">
                        <%@ include file="grid2.jsp" %>
                    </td>
                </tr>

In java script, I have tried making the styles "" or none accordingly. Board function will be called when I press a button the side buttons l be like

<img src="images/board.jpg" onclick="board()"> 

board(){
document.getElementById("message").style.display = "";
document.getElementById("task").style.display = "none";
}

The other grid will be called llike this

<img src="images/board.jpg" onclick="list()"> 
list(){
document.getElementById("message").style.display = "none";
document.getElementById("task").style.display = "";
}

But for me, initial loading of the page shows the board alone. But When I press toggle button, it shows both board and list. Any mistake with my code?

Answer 1

For toggling you can use like this.

Here is a jquery sample in jsfiddle

JsFiddle

$(thing).toggle();

Is used for toggle.