JavaScript - Hide all other divs

I've a number of divs that are only visible after clicking a link. How to close all open divs so that only the clicked one is visible?
I'm using this .js:

    function showhide(id){
        if (document.getElementById) {
        var divid = document.getElementById(id);
        divid.style.display = (divid.style.display=='block'?'none':'block');
        } }

        <a href="javascript:void(null)" onclick="showhide('features');">features</a>
<a href="javascript:void(null)" onclick="showhide('design');">design</a>
<a href="javascript:void(null)" onclick="showhide('create');">create</a>

Thanks Uli

Answers:

Answer

One way is to add a class and seek the elements based on that to hide them (as shown in other answers)

An alternative is to store the state of the elements in an object and use that to identify the open ones that need closing..

var divState = {}; // we store the status in this object
function showhide(id) {
    if (document.getElementById) {
        var divid = document.getElementById(id);

        divState[id] = (divState[id]) ? false : true; // initialize / invert status (true is visible and false is closed)
        //close others
        for (var div in divState){
            if (divState[div] && div != id){ // ignore closed ones and the current
                document.getElementById(div).style.display = 'none'; // hide
                divState[div] = false; // reset status
            }
        }
        divid.style.display = (divid.style.display == 'block' ? 'none' : 'block');
    }
}

Demo at http://jsfiddle.net/gaby/LfzYc/

Answer

You can use document.getElementByTagName to retrieve all divs.

Then iterate over them and for each one set the style to block if it's the div obtained from getElementById before, or none otherwise.

(I suggest to add a class to all the divs relevant here, and only consider the divs with this class during the iteration, so that unrelevant parts of the page won't be affected.)

Answer

The following code will hide all div and show the one you click on...

function showhide(id){
        if (document.getElementById) {
          var divid = document.getElementById(id);
          var divs = document.getElementsByClassName("hideable");
          for(var div in divs) {
             div.style.display = "none";
          }
          divid.style.display = "block";
        } 
        return false;
 }

<a href="#" onclick="showhide('features');" >features</a>
<a href="#" onclick="showhide('design');"  >design</a>
<a href="#" onclick="showhide('create');" >create</a>

<div class="hideable" id="features">Div 1</div>
<div class="hideable" id="design">Div 2</div>
<div class="hideable" id="create">Div 3</div>

I also added the return false; to preven the link's default behavior. It's cleaner and easier to understand than using javascript:void(null) on the link's href attribute. Does it solve your issue?

Answer

Using a classname is the typical way to do this but I'd recommend to use a lib like jquery/rightjs/whateveryoulike to do this; because: getElementsByClassName() is not supported by < IE9 and querySelectorAll() not supported by < IE8. If you can not use a lib, then you would need to iterate over all divs via getElementsByTagName("div") and check for that class.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.