Close all open divs

Question

i have a site with a lot of divs and this javascript function to open it by clicking a link. now i want add the function to close all other divs when opening a new one

I also want to make it possible to close a div by pressing esc key.

Can sb help me how to get it done?

 function toggleDiv(divid){
        var div = document.getElementById(divid);
        div.style.display = div.style.display == 'block' ? 'none' : 'block';
        }
html part:
<a href=javascript:toggleDiv('div_name'); >

Answer 1

I'm not going to write all the vanilla JS code, particularly because you didn't expressly forbid suggestions that imply jquery- so everything here is going to be generic. Here is how I would approach it:

1) Apply to all "togglable" divs either a class of "togglediv" or a data-attribute element (I prefer to go the way of a data-attribute element in most cases when assigning dynamic functionality but in this type of case a class is probably preferable).

2) On doc-load, get all of those divs and store them in an array.

3) Once you have your array, loop through it and apply an onclick pointing to a "toggle" function to each div in the array.

4) The toggle function should first loop through that array of divs, and apply the class of "closed" to each element. You can use CSS to apply display:none to all divs that are classed ".togglediv.closed". The class of ".togglediv" by nature should be visible. After it does that, it makes sure the targeted div does NOT have the "closed" class applied to it.

5) Apply an onkeypress event to the document body (or the most specific elment possible such as your wrapper if you have one) that calls the "toggle" function. If you write the "toggle" function correctly such that if there is no element passed to it by an event it knows to CLOSE ALL DIVS in the loop, then your escape key functionality is already built in.

This pseudo code should be enough to get your started. Let me know if you need more help.

Protip: using "progressive enhancement" here is a breeze- in the document load portion of this code, be sure to loop through that array when you get it and set all of them to "closed" (or hidden or whatever class you want) so that they are by default hidden. DO NOT load the document with those elments in their hidden states, as users without JS will see a broken site (booooooo!) - rather, use progressive enhancement to hide the divs once you've loaded the document with javascript (yaaaay!)

Cheers!

Answer 2

HTML elements will not necessarily have style properties set (if they have no HTML style attribute and no CSS rule matches).

One way to find out if an element is taking space on the screen is to test clientHeight and clientWidth .

For the Esc key you would have to add and event listener for the 'keydown' or 'keyup' event type (since 'keypress' does not fire for keys not producing a character).

The values returned for 'keydown' or 'keyup' are quite unreliable for international keyboards.

I get this for Esc on a German keyboard for 'keydown' or 'keyup':

charCode: 0
clipboardData: undefined
ctrlKey: false
currentTarget: null
defaultPrevented: false
detail: 0
eventPhase: 0
keyCode: 27
keyIdentifier: "U+001B"
...
type: "keydown"

Note that charCode is 0, but keyCode and the unicode notation of keyIdentifier both report the Esc key.

http://www.fileformat.info/info/unicode/char/1b/index.htm