JS Content Slider

[luke-stealth-man]

I have the following script.

function showonlyone(thechosenone) {
var newboxes = document.getElementsByTagName("div");
for(var x=0; x<newboxes.length; x++) {
name = newboxes[x].getAttribute("name");
if (name == 'newboxes') {
if (newboxes[x].id == thechosenone) {
newboxes[x].style.display = 'block';
}
else {
newboxes[x].style.display = 'none';
}
}
}
}

This allows me to show hidden content when a link is clicked.

<a href="javascript:showonlyone('newboxes1');" ><li>CLICK HERE</li></a>
<div name="newboxes" id="newboxes1" style="display: none;">
Hidden content.
</div>

<a href="javascript:showonlyone('newboxes2');" ><li>CLICK HERE</li></a>
<div name="newboxes" id="newboxes2" style="display: none;">
Hidden content.
</div>

When you click the link it shows the content and hides any of the other divs contents. But, if you click the link a second time it doesn't collapse the content. How can I modify the script to do this?

[Momo-the-Monkey]

Let's logic our way through this, shall we?
First, let's take out checking if the element is thechosenone from the for loop.

for(var x = 0; x < newboxes.length; x++) {
	if(newboxes[x].name == 'newboxes'){
		newboxes[x].style.display = 'block';
	}
}

Perfect, that closes every box with the name "newboxes" every time you click the link. Now we need to add some checking. Rather than adding an entire new if/else statement, let's just hide any element that is not thechosenone

for(var x = 0; x < newboxes.length; x++) {
	if(newboxes[x].name == 'newboxes' && newboxes[x].id != thechosenone){
		newboxes[x].style.display = 'block';
	}
}

Great, if it's not thechosenone, it will be hidden. You can check this by removing "display: none" from the style and click that box's link.

Now, this is good, but we don't want to have to remove any stylings. SO, now that we know thechosenone will not be hidden, we can modify it however we see fit.

var chosenbox = document.getElementById(thechosenone);
chosenbox.style.display = 'block';

Fantastic, that does exactly what we want. It displays thechosenone every time. Click a different link and it disappears, because it is no longer thechosenone.

Now we want the ability to hide thechosenone if its link is clicked after it has been opened, so we add a bit of if/else checking (I condensed it into single-line form... much easier to read).

var chosenbox = document.getElementById(thechosenone);
chosenbox.style.display = (chosenbox.style.display == 'block') ? 'none' : 'block';

Put all that together, and you should be able to hide/reveal thechosenone by clicking on the link multiple times.

[Momo-the-Monkey]

Gah sorry, in the first two examples, style.display should be set to "none," not display :)

[Momo-the-Monkey]

This is embarrassing :$ Sorry. newboxes[x].name should be newboxes[x].getAttribute("nane");

All these mistakes are quite embarrassing. I even read it all through before posting!

[luke-stealth-man]

I think I'm putting it all together wrong because it's not working correctly. Can you post what the full and final script should look like? Thanks.

[luke-stealth-man]

Bump.

[luke-stealth-man]

Final bump, anyone?

[fourthfrench]

The way he's doing it is like this:

function showonlyone(thechosenone) 
{
	e = document.getElementById(thechosenone);
	state = e.style.display;
	newboxes = document.getElementsByName("name");
	for(x=0; x<newboxes.length; x++) newboxes[x].style.display = 'none';
	e.style.display = state=="block"?"none":"block";
}

That's kind of stupid since you are setting all the divs whose display properties are already none to none. It's not a big deal, but I'd do it more directly.

function showonlyone(id)
{
	curr = document.getElementById(id);
	curr.style.display = curr.style.display=="block"?"none":"block";
	if(this.old!=null&&this.old!=curr) this.old.style.display = "none";
	this.old=curr;
}

[Momo-the-Monkey]

At 3/18/11 11:05 AM, fourthfrench wrote: That's kind of stupid since you are setting all the divs whose display properties are already none to none. It's not a big deal, but I'd do it more directly.

I was minimizing the use of global variables, or having to keep track of anything; I was also following his logic. I only modified his code.

To the original poster, I would have been more inclined to help you after your numerous bumps if you had posted the code you were having trouble with on the second time around instead of just asking for the source.