Get Elements By ID (using wildcards)

[furiousweebee]

Hi all,

I've put together a page which has a series of hidden DIVS. When a user clicks a button, the DIV becomes visible. When they click the button again, it hides the DIV once more. That works, but I want to create another button which toggles all such DIVs on the page.

This is the function:

function expandcontent(cid) {
	if (typeof ccollect!="undefined") {
		if (collapseprevious=="yes")
			contractcontent(cid)
		document.getElementById(cid).style.display=(document.getElementById(cid).style.display!="block")? "block" : "none"
	}
}

I call the function in this way:

<a href="javascript:expandcontent('hidden_IM01');expandcontent('hidden_IM02');expandcontent('hidden_IM03');" >Expand / collapse all articles</a>

My HTML looks like this:

<a href="javascript:expandcontent('hidden_IM01')">Expand / collapse article</a>

<div id="hidden_IM01" class="switchcontent">

<p>The content here</p>

</div>

With around 30 hidden DIVs per page, this is a rather cumbersome method. The ID of each hidden DIV begins with "hidden_", so I want to automatically find all of these DIVs, rather than having to manually go through my code and add each ID to the link.

Logically, this is how I think a solution might work:

1. Find all DIVs with the "switchcontent" class

2. Within that array, find all ID's beginning with "hidden_"

3. Call expandcontent() for each iteration

Can anybody help me with this? I'm a novice with javascript (I can modify code but not really write it). Any assistance would be greatly appreciated. Thanks!

[sneakyimp]

You could try something like this:

var allDivs = document.getElementsByTagName('div');
for(i=0; i<allDivs.length; i++) {
  var aDiv = allDivs[i];
  var sID = aDiv.id;
  if (sID.indexOf('hidden_') == 0) {
    // show or hide the div here.
  }
}

[furiousweebee]

Thanks sneaky. This is my function:

function toggle_all_articles() {
	var all_articles = document.getElementsByTagName('div');
	for(i=0; i<all_articles.length; i++) {
		var aDiv = all_articles[i];
		var sID = aDiv.id;
		if (sID.indexOf('hidden_') == 0) {
			expandcontent(sID);
		}
	}
}

<a href="javascript:toggle_all_articles();">Expand / collapse all articles</a>

When I click the link, the first few elements are made visible, and the last element, but none of the ones in between. I'm assuming I've missed something in my HTML code since this same problem was occurring even when using my original method of manually adding each ID to the link.

So it seems to be working, but I'll review my code to make sure I haven't missed anything. Thank you so much for your help!

[sneakyimp]

That looks pretty good to me, although in retrospect I would have given my vars better names. I tend to prefix everything with 'a' for arrays, 'e' for elements, 's' for strings, etc. I should have called it 'eDiv' instead of 'aDiv'.

[furiousweebee]

I can't figure this bugger out... my code seems fine, and I've even printed it out (all 600 lines) and gone through it line by line to make sure it's perfect. I ran the validation function in Dreamweaver as well, with no errors. And yet, I can't get it to expand all of the boxes.

My page is set up so that there's a normal DIV at the top of the document containing several of the hidden DIVs, and they all expand properly. However, the first hidden DIV outside this doesn't expand, nor do the next several, but then the last one does. Weird!

I think there MUST be some improperly formed code either at the point of the first, or last, DIV that won't expand.

I hope this makes sense. I'm kind of just babbling out loud.

[JPnyc]

just create your div object, iterate through it as you are doing, and test for class name

[JPnyc]

here's a piece of code to give you an idea
function hideSpans() {
var Spans = document.getElementsByTagName('span');
for(var i=0; i < Spans.length; i++) {

if(Spans.className=='clickhere') {

Spans.style.display="none";
}}}

Of course you want it to toggle so you have to add another test for the current state.