admin管理员组

文章数量:1277565

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.

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.

  • javascript
  • toggle
  • getelementbyid
Share Improve this question edited Jan 6, 2014 at 12:22 BenMorel 36.6k51 gold badges205 silver badges336 bronze badges asked Aug 4, 2012 at 7:54 user1575698user1575698 531 gold badge2 silver badges6 bronze badges 2
  • 1 The goal is unachievable, because “every other element” includes the body element, and setting display: none hides its all descendants too (including your button). Please clarify. Explaining why you are doing this might help, too. – Jukka K. Korpela Commented Aug 4, 2012 at 8:01
  • Sorry for being dubious. I edited my question. I need to hide some other table elements which is already visible because it does not look good if if two table element is visible at the same time. I want to make only one table element is visible at the moment. – user1575698 Commented Aug 4, 2012 at 8:05
Add a ment  | 

3 Answers 3

Reset to default 5

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>

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';

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.

本文标签： javascriptdocumentgetElementById(id) and toggling multiple idsStack Overflow

版权声明：本文标题：javascript - document.getElementById(id) and toggling multiple ids - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741294607a2370744.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。