document.getElementById(id) and toggling multiple ids

javascript toggle getelementbyid

12,500

Solution 1

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>

Solution 2

You could select all the other DOM elements, set their display attribute to "none", and then only show the one that should be visible.

Another way would be to keep track of the visible element in a variable:

var visibleElement = null;

When you toggle an element, you make that one the visible element and hide the previously visible one:

// Hide the previously visible element, if any.
if (visibleElement != null)
{
    visibleElement.style.display = 'none';
}

// Make your new element the visible one.
visibleElement = document.getElementById(id)
visibleElement.style.display = 'block';

Solution 3

Easy using jQuery. For example, give each toggled element a class like toggle_element and then in JS:

$('.toggle_element').hide();
$('#id').show();

This will hide all elements with class toggle_element and show element with id id.

JSFiddle example here.

12,500

Author by

user1575698

Updated on June 05, 2022

Comments

user1575698 about 2 years
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.
Tadeck almost 12 years

Why do you provide jQuery solution to a question where OP is clearly using raw JavaScript?
Kurt almost 12 years

@Tadeck - because the OP is doing something that can be easily achieved using jQuery and I dare say he is unaware of this
Tadeck almost 12 years

This is very simple task and since OP seemingly is not using jQuery, I would not propose him to add whole JavaScript framework solely to perform this action. Take a look at the accepted answer, to see that it is easily achievable in pure JavaScript also. Anyway you have given good alternative for people who already use jQuery.
Kurt almost 12 years

I will give raw JS first next time, Thank you for the response :)