CODEWITHSUNDEEP
javascripthtml
Uli
Uli

Reputation: 2693

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

Upvotes: 6

Views: 17680

Answers (5)

Harry
Harry

Reputation: 326

The IDs or Class name of the div could be updated on a temporary array and a simple if condition would help. A similar snippet that worked for me in my usecase.

var screens = ["screen_splash","screen_login","screen_register","route_getotp","route_loginvalidate","route_inputotp","screen_dashboard","screen_search","screen_cart","screen_myaccount"];

function changescreen(screen)
{
    screens.forEach(function(value)
    {
        if(value == screen){
            $("#"+value).show();
        }else{
            console.log("Disable Screen : " +value);
            $("#"+value).hide();
        }
    });

}

Note: Remember to change # to . based on the usage of id or class name on your code.

Upvotes: 0

Kos
Kos

Reputation: 72261

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.)

Upvotes: 2

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196002

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/

Upvotes: 7

biophonc
biophonc

Reputation: 443

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.

Upvotes: 0

Deleteman
Deleteman

Reputation: 8700

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?

Upvotes: 1

Related Questions