Mostrar y ocultar div

[Matuha]

Hola! Estoy empezando con javascript esto es un ejemplo que conseguí buscando por Google y lo he adaptado un poco a lo que quiero... con esto consigo mostrar o ocultar un div.. uno de ellos muestra productos y el otro comentarios

Lo que quiero conseguir es que si al mostrar el div comentarios el div productos no esta oculto, este se oculte, o viceversa... tal como tengo no lo consigo... al mostrar el div comentarios el div productos no se oculta...

Código HTML:

<script language="JavaScript">
function muestra_oculta(id,idComentario) {
	if (document.getElementById) {
		var producto = document.getElementById(id);
		producto.style.display = (producto.style.display == 'none') ? 'block' : 'none';
		var comentario = document.getElementById(idComentario);
		comentario.style.display = (comentario.style.display == 'none') ? 'block' : 'none';
	}
}
</script> 

Código HTML:

<div class="content-resultados" onclick="muestra_oculta('id<? echo $cont; ?>')">
Productos
</div>
<div class="content-opiniones" onclick="muestra_oculta('idComentarios<? echo $cont; ?>')">
Comentarios
</div>
 
<div id="id<? echo "$cont"; ?>" style="display:none;">
Contenido productos...
</div>
<div id="idComentarios<? echo "$cont"; ?>" style="display:none;">
Contenido Comentarios...
</div> 

[Alexis88]

Puedes utilizar una clase para ocultar a cualquiera de los dos elementos. En la función, bastaría con tomes al elemento que posea la clase que lo oculta y se la quitas, mientras que para tomar al otro elemento, puedes utilizar la pseudo-clase CSS de negación :not para indicar que deseas tomar al elemento que no posea dicha clase.

Código HTML:

<section id = "elementos">
    <div>Primer elemento</div>
    <div class = "oculto">Segundo elemento</div>
</section>
<span id = "cambio">Cambiar</span>
 

Código CSS:

.oculto{
    display: "none";
}
 

Código Javascript:

document.addEventListener("DOMContentLoaded", function(){
    document.querySelector("#cambio").addEventListener("click", function(){
        document.querySelector(".oculto").className = "";
        document.querySelector("#elementos div:not(.oculto)").className = "oculto";
    }, false);
}, false);
 

Adáptalo a lo que intentas hacer.

Un saludo

[mpozo]

Hola! Yo también quiero hacer lo mismo pero tu codigo solo vale para dos div. Necesito que todos los divs (5 en este caso) esten ocultos de inicio y que solo se pueda mostrar uno a la vez. Al mismo tiempo que todos puedan estar ocultos

Gracias

[IsaBelM]

@Alexis88

display: "none";

prueba con este otro

function evento() {

var inst = new variables();

Array.prototype.forEach.call(arguments, function (v, i, arr) {

document.querySelector(arr[i][0]).addEventListener('click', function() {

inst.muestra_oculta(arr[i][1]);

}, false)
})

}


function variables() {

this.cont = 0;
this.sel = null;
}


variables.prototype.muestra_oculta = function(id) {

if (this.sel === id || this.sel == null) {
document.querySelector(id).style.display = (this.cont++ % 2 == 0) ? 'block' : 'none';

} else if (this.sel !== id) {

document.querySelector(id).style.display = 'block';
document.querySelector(this.sel).style.display = 'none';
this.cont = 1;
}

this.sel = id;
}




document.addEventListener('DOMContentLoaded', function() {

evento.apply(null, [['.content-resultados', '#id1'], ['.content-opiniones', '#id2']]);

}, false);



<div class="content-resultados">
Productos
</div>
<div class="content-opiniones">
Comentarios
</div>

<div id="id1" style="display:none;">
Contenido productos...
</div>
<div id="id2" style="display:none;">
Contenido Comentarios...
</div>