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.

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