[Resolvido] Criando div hide/show multiplo

[tokageh 0]

Boa tarde,

 

estou enfrentando um problema um quanto tanto chato infelizmente.

 

Estou tentando criar um JS não-obstrusivo que faça o seguinte: ao clicar em um H3, o div de mesma ID abre e as divs seguintes, que correspondam a uma classe, fechem.

 

Estou tentando a fazer da seguinte maneira:

function tabs() {
		var content = document.getElementsByTagName("h3");
		
		for(var i = 0; i < content.length; i++) {
		
			content[i].onclick = function() {
				
				var conteudo = document.getElementByID('c_' + i);
				
				if( conteudo.className != "content_cp" ) {
					conteudo.className = "content_cp";
					conteudo.style.display = "block";
				}
				else {
					conteudo.className = "content";
					conteudo.style.display = "none";
				}
			}
		}
	}

window.unload = tabs;


	<h3 id="0">abc</h3>
	<div class="content" id="c_0"></div>
	
	<h3 id="1">def</h3>
	<div class="content" id="c_1"></div>
	
	<h3 id="2">ghi</h3>
	<div class="content" id="c_2"></div>
	
	<h3 id="3">jkl</h3>
	<div class="content" id="c_3"></div>
	
	<h3 id="4">mno</h3>
	<div class="content" id="c_4"></div>

Já tentei de diversas outras maneiras, usando até javascript direto no h3, mas daí só funcionou no Firefox...

 

Alguem tem alguma idéia?

Agradeço desde já!

 

[]'s

[andreia_sp 1]

Uma coisa que está errada nao sei se você soh colocou assim aqui mas se nao, arrume:

 

de

getElementByID

para

getElementById

aproveita e ja roda no IE ve se nao eh isso

[tokageh 0]

Olá,

 

infelizmente não é isso não... coloquei o ID todo em maiúsculo sem querer hehe

 

Abraços

[falke 0]

Opa, beleza?

olha se é +- o que você está querendo:

function tabs(id){
	var content = document.getElementsByTagName("div");
	
	for(var i = 0; i < content.length; i++) {
		var conteudo = document.getElementById('c_'+i);
		if(i == id){
			conteudo.style.display = "block";
		}
		else{
			conteudo.style.display = "none";
		}
	
	}
}


	<h3 id="0" onclick="tabs(this.id)">abc</h3>
	<div class="content" id="c_0" style="display:none">abc</div>
	
	<h3 id="1" onclick="tabs(this.id)">def</h3>
	<div class="content" id="c_1" style="display:none">def</div>
	
	<h3 id="2" onclick="tabs(this.id)">ghi</h3>
	<div class="content" id="c_2" style="display:none">ghi</div>
	
	<h3 id="3" onclick="tabs(this.id)">jkl</h3>
	<div class="content" id="c_3" style="display:none">jkl</div>
	
	<h3 id="4" onclick="tabs(this.id)">mno</h3>
	<div class="content" id="c_4" style="display:none">mno</div>

flow, abraço!

[tokageh 0]

Olá,

 

tá de brincadeira neh? sacanagem... funcionou perfeitamente! testei em diversos navegadores e funcionou!

 

só fiz uma "pequena" alteração... em var content = document.getElementsByTagName("div");, alterei o "div" para "h3", pois é o h3 que desejo puxar ;)

 

Funcionando 100%! Agradeço!!

 

 

Abraços!

[falke 0]

Olá,

 

tá de brincadeira neh? sacanagem... funcionou perfeitamente! testei em diversos navegadores e funcionou!

 

só fiz uma "pequena" alteração... em var content = document.getElementsByTagName("div");, alterei o "div" para "h3", pois é o h3 que desejo puxar ;)

 

Funcionando 100%! Agradeço!!

 

 

Abraços!

é vdd você queria o h3..

 

que isso....precisando é só falar!!!

 

flow, abraço!