Hello all.

I have a mootools accordion in the website I'm building that uses two classes: "toggler" for the titles and "element" for the content.

I'm in the need of adding an input field at the bottom of the "element" DIV that the user has opened.

Problem is, every content of every different toggle has the same id="element".

The only difference is that the one opened has the visibility set to "visible".

Is there a way so I can write in that visible DIV from Javascript?

Recommended Answers

All 9 Replies

Altairzq,

Not using document.getElementById() but you should be able to use document.getElementById('x').document.getElementsByTagName('whatever') instead, where 'x' is the id of a div wrapper of the first accordion. Then, use id='y' for the wrapper of the other accordion.

You should then be able to loop through the resulting collection to target a specific contained element. It will be a bit trickier if the target element is more than one level deep in the DOM but it's not too bad once you have penetrated the accordion's DOM structure (which you may well have done already).

Airshow

Hello all.

I have a mootools accordion in the website I'm building that uses two classes: "toggler" for the titles and "element" for the content.

I'm in the need of adding an input field at the bottom of the "element" DIV that the user has opened.

Problem is, every content of every different toggle has the same id="element".

The only difference is that the one opened has the visibility set to "visible".

Is there a way so I can write in that visible DIV from Javascript?

I've underlined some conflicting statements in your problem description, and the clearance on that part might give some strait forward solution.

That is: if explanation stating that elements are using the word "element" as an ID, is just a writing mistake, meaning that the first statement is in fact correct, you could solve your problem by simply adding an unique ID to that element that would enable you to access its properties directly later on.

But if all these elements are really using ID instead of CLASS selector you'll be forced to take another route. And there are lots of them...

And since the visibility property is being set by javascript than javascript will be able to retrieve its value also.
So one of the ways to go, would be to write a function that does this:

function getVisibleEl(){
	var els = document.getElementsByTagName('div');
	for(var i=0; i<els.element.length; i++){
		if(els.element[i].style.visibility=="visible" ){
			//this is our DIV, write to
			els.element[i]
			//your planed input element there
		}
      }
}

document.onclick=getVisibleEl

Yet this commodity happens to be granted only by Internet Explorer.
Netscape children are not able to select inner collection of the div tags branch collected by .getElementsByTagName(), so you'll be forced to go fishing in the div tag soup, and iterate the whole div collection inside this document not only divs belonging to the ID 'elements', which is a waste of CPU power and increasingly slower and inefficient making its specificity vulnerable in case there are other purpose divs also having this property set to visible.

function getVisibleEl(){
	var els = document.getElementsByTagName('div');
	for(var i=0; i<els.length; i++){
		if(els[i].style.visibility=="visible" ){
			//this is our DIV, write to
			els[i]
			//your planed input element there
		}
      }
}

document.onclick=getVisibleEl

Thus to prevent it you'll need to couple the conditional evaluator that checks for ID qualification also.
recommended example

function getVisibleEl(){
	var els = document.getElementsByTagName('div');
	for(var i=0; i<els.length; i++){
		if(els[i].id=="element" && els[i].style.visibility=="visible") {
			//this is our DIV, write to
			els[i]
			//your planed input element there
		}
      }
}

document.onclick=getVisibleEl

Of course this is only one of some possible ways to pick the element you intend to modify.

Thanks a lot for the insight and the great examples!
Will work on this ASAP.

I will have to mention this forum in the credits :)

Troy you are right, nothing to do with css classes or whatever, I meant two different elements or levels.

Thanks a lot for the insight and the great examples!
Will work on this ASAP.

I will have to mention this forum in the credits :)

Troy you are right, nothing to do with css classes or whatever, I meant two different elements or levels.

Nice
I'm puzzled though, why is that code using same id on multiple elements?

And I have another puzzle somebody could answer to me: whose responsibility is to mark threads as solved, :: the thread starter or admins? (!please, I really don't know the answer to this, just curious!)

Nice
I'm puzzled though, why is that code using same id on multiple elements?

And I have another puzzle somebody could answer to me: whose responsibility is to mark threads as solved, :: the thread starter or admins? (!please, I really don't know the answer to this, just curious!)

The poster marks the thread solved though admins probably have the ability it's not really their job to do so.

The poster marks the thread solved though admins probably have the ability it's not really their job to do so.

Thanks I appreciate it.
Cheers.

Yes I marked all my previous threads as solved. Hopefully this one soon! But...

There us something really weird happening now, I added an "onclick" event in the toggler (main level of the accordion). I was thinking this wouldn't work because there must be another kind of onclick event behind the scenes that makes that main level to open (and close when you click it again). But anyway I tried it and it worked in my machine (windows). It opened and closed at every click while executing my javascript function, so it was perfect.

But! when I try it in the remote server, it not only doesn't execute my function, the main level opens and closes with a single click which makes it impossible to use. I'm very frustrated.. I thought I had found the perfect solution... shouldn't it work just in the same way, being everything in client side (as far as I know)?

This happens in FF, IE and Safari.

Any idea about what is causing this?

1. But! when I try it in the remote server, ...

2. Any idea about what is causing this?

1. Have you tried it against your refrigerator too. What on earth do you mean by "remote server" ?!!

2. Yes. Human mistake, most certainly you!

1) Remote web server? as opposed to my local machine web server? :-O

2) hehe yes it was probably. Fortunately that mootools accordion has a built-in way to add your custom functions in a neat way so no need to use any event that was disrupting its functioning.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.