Javascript toggle function

Question

I am currently using the following code on a website to allow some div's to be populated with content via ajax when a link is clicked, as well as hidden again if clicked a second time.

The javascript function that does this is (stripped of irrelevant code):

function showNews(id){
    if(CONDITION){
        ajax(); //Not actual code, original code just grabs content via ajax and puts it into an existing empty div using innerHTML.
    }
    else if (CONDITION) {
        document.getElementById('div'+id).innerHTML = ''; // Empties div again, in effect hiding it from view.
    }
}

This currently works fine, as when each link is clicked the corresponding DIV fills with content, and when clicked again the content disappears. However, I can open as many of these div's as I want at the same time. I want it to work so that when a new div is populated the rest are emptied.

All of the div's have an ID like this: id="div#" where the # is replaced with a unique ID number.

So I need to do something like this:

function showNews(id){
    if(CONDITION){
        ajax(); //Not actual code, original code just grabs content via ajax and puts it into an existing empty div using innerHTML.
**FOR ALL DIVS THAT HAVE AN ID THAT STARTS WITH 'div', BUT DOES NOT MATCH CURRENT ID VARIABLE, SET innerHTML = ''**
    }
    ... code removed from original ...
}

I hope this makes sense.

So... what's your question? It seems like you have a handle on the logic. — nrabinowitz
– nrabinowitz, Commented Oct 5, 2011 at 4:43
I had the logic figured out, just not sure the best way hide a bunch of DIVs without knowing the for each of them, and only knowing that the ID would start with 'div'. For example, <div ID='div123'>. Got it sorted out now, the accepted answer works perfectly. — Sherwin Flight
– Sherwin Flight, Commented Oct 5, 2011 at 5:57

Dennis · Accepted Answer · 2011-10-05 05:16:57Z

1

document.getElementsByTagName('div') is an array (a node list, actually) of all divs.

You can check their IDs with .id.

Try this:

var divs = document.getElementsByTagName('div');
for(var i = 0; i < divs.length; i++)
    if( (divs[i].id.substr(0,3) == 'div') && (divs[i].id != ('div' + ID)) )
        divs[i].innerHTML = '';

divs[i].id.substr(0,3) == 'div' checks if the div's id is divSomething.

divs[i].id != ('div' + ID) makes an exception for divID.

edited Oct 5, 2011 at 5:16

answered Oct 5, 2011 at 4:56

Dennis

14.5k3 gold badges51 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sherwin Flight Over a year ago

I was starting to get somewhere before you made your post. I got it to hide all DIV's except the current one. Only problem, it was hiding ALL DIV's, so navigation and everything. Your solution works perfectly, and is a bit faster than what I was doing as well. Thanks a lot!!

blankabout · Accepted Answer · 2011-10-05 04:46:25Z

0

Maybe you could give each div the same name (because names, unlike Ids, do not have to be unique) then use document.getElementsByName to find & clear them prior to populating the current div.

answered Oct 5, 2011 at 4:46

blankabout

2,6473 gold badges20 silver badges29 bronze badges

Collectives™ on Stack Overflow

Javascript toggle function

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related