Home/ Questions/Q 8327685
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T01:12:01+00:00

I have this simple function which toggles a hidden element in the webpage. function

  • 0

I have this simple function which toggles a hidden element in the webpage.

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


<input type="button" value="Toggle" onclick="showtable('id');" />

This works fine, but I want to toggle off some other (table) element (with certain ids) (except for the one which is being toggled, whether on or off) on the page every time the button is clicked.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You could use jQuery, but if you don’t want to use that; here is a pure javascript example. To see how it works, copy paste it in a text file, save it as test.htm and open it in a browser. It contains three tables, each with a button above it. When clicking a button, it’s table gets displayed and all other tables get hidden. If you need more tables, give them an id, and add their id to the array in the function: 

    var ids = ["redTable", "greenTable", "blackTable", "anotherTable"];

    If you want to be able to toggle that table also, it will off course also need a button: 

    <input type="button" value="Toggle Green Table" onclick="showtable('anotherTable');" />

    example:

    <!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript">
            function showtable(id) {
                var ids = ["redTable", "greenTable", "blackTable"];
                for(var i = 0; i < ids.length; i++) {
                    if(ids[i] != id)
                        document.getElementById(ids[i]).style.display = "none";
                }
                document.getElementById(id).style.display = "block";
            }
        </script>
    </head>
    <body>
        <input type="button" value="Toggle Red Table" onclick="showtable('redTable');" /><br />
        <table style="width: 100px; height: 100px; background-color: red;" id="redTable">
            <tr>
                <td>redTable</td>
            </tr>
        </table>
        <input type="button" value="Toggle Green Table" onclick="showtable('greenTable');" /><br />
        <table style="width: 100px; height: 100px; background-color: green; display: none;" id="greenTable">
            <tr>
                <td>greenTable</td>
            </tr>
        </table>
        <input type="button" value="Toggle Black Table" onclick="showtable('blackTable');" /><br />
        <table style="width: 100px; height: 100px; background-color: black; display: none;" id="blackTable">
            <tr>
                <td>blackTable</td>
            </tr>
        </table>
    </body>
</html>
    • 0