Utilizar "GetElemenBy" con elemento "Class"

[husseincak]

Muy buenas a todos! :)
Tengo un pequeño problema con este código de javascript. Lo que quiero que haga el código es minimizar y maximizar dos elementos div (ocultarlos y volverlos a mostrar).

El problema es que al no ser unico el elemento no puedo utilizar la etiqueta "id", por lo que necesitaría un "getElementByClass" que ocultara y mostrara los dos elementos cuando se pulsa el botón.
Me he estado informando y esto no es posible por lo que veo porque no existe tal función.

Entonces me gustaría si alguien conociese alguna solución que me la diga, porque el código es copiado de una web que utiliza el getElementById, no es hecho por mi. Yo no tengo ni idea de javascript xD

Muchísimas gracias de antemano y aquí os dejo el código

Código Javascript:

<script language="javascript" type="text/javascript"><!-- Script del tutorial-->
<!--
function minimizar(nombre_capa){
document.getElementById(nombre_capa).style.display="none";
}
function maximizar(nombre_capa){
document.getElementById(nombre_capa).style.display="block";
}
//-->
</script>
 

Código HTML:

<div id="max1">
<!--Elemento a ocultar 1-->
</div>
 
<input name="imagefield" type="image" src="images/botones/menos.button.png" onclick="minimizar('max1')" class="menos"/>
<input name="imagefield" type="image" src="images/botones/mas.button.png" onclick="maximizar('max1')" class="mas"/>
 
<div id="max1">
<!--Elemento a ocultar 2-->
</div>
 

[carlos_belisario]

verifica si te sirve esto http://help.dottoro.com/ljpxmhgp.php, saludos

[husseincak]

Gracias por contestar :)
En principio no me ha funcionado, pero no se si es porque lo he implementado mal. Esque no tengo ni idea de javascript

Así es como lo tengo ahora:

Código Javascript:

<script language="javascript" type="text/javascript"><!-- Script del tutorial-->
<!--
function minimizar(nombre_capa){
object.getElementsByClassName(nombre_capa).style.display="none";
}
function maximizar(nombre_capa){
object.getElementsByClassName(nombre_capa).style.display="block";
}
//-->
</script>
 

Código HTML:

<div class="max1">
<!--Elemento a ocultar 1-->
</div>
*
<input name="imagefield" type="image" src="images/botones/menos.button.png" onclick="minimizar('max1')" class="menos"/>
<input name="imagefield" type="image" src="images/botones/mas.button.png" onclick="maximizar('max1')" class="mas"/>
*
<div class="max1">
<!--Elemento a ocultar 2-->
</div>
 

[danny_]

Para acceder a dichas etiquetas tienes la opcion de utlizar el método querySelectorAll(); Dentro de sus parametros simplemente tienes que poner la ruta css y éste apuntará hacia los elementos que tu le indiques y asi acceder al DOM de tu documento.

Échale un ojito a ésto es muy útil está función https://developer.mozilla.org/es/doc...erySelectorAll

[carlos_belisario]

pudieras hacer algo como esto

Código Javascript:

var myDivs = document.getElementByClassName('myClass');
for (var i = 0; i < myDivs.length; i++) {
    var actualDiv = myDivs[i];
    actualDiv.style.display = "none"; //o el block cuando es para mostrar                
}
 

imagino que le puede servir cuando lo hace con el querySelectorAll ya que ambas funciones devuelven un NodeList, saludos

[husseincak]

Iniciado por danny_

Para acceder a dichas etiquetas tienes la opcion de utlizar el método querySelectorAll(); Dentro de sus parametros simplemente tienes que poner la ruta css y éste apuntará hacia los elementos que tu le indiques y asi acceder al DOM de tu documento.

Échale un ojito a ésto es muy útil está función [URL="https://developer.mozilla.org/es/docs/DOM/Document.querySelectorAll"]https://developer.mozilla.org/es/docs/DOM/Document.querySelectorAll[/URL]

Ajám, el problema es que no se como implementarlo :S
¿Sería algo así?:

Código Javascript:

function minimizar(nombre_capa){
document.querySelectorAll(nombre_capa).style.display="none";
}
 

Código HTML:

<input name="imagefield" type="image" src="images/botones/menos.button.png" onclick="minimizar("div.max1, div.max2")" class="menos"/>
 
<div class="max1">
</div>
<div class="max2">
 

<----------------------------------------------------------------------------------------------------->

Iniciado por carlos_belisario

pudieras hacer algo como esto

Código Javascript:

var myDivs = document.getElementByClassName('myClass');
for (var i = 0; i < myDivs.length; i++) {
    var actualDiv = myDivs[i];
    actualDiv.style.display = "none"; //o el block cuando es para mostrar                
}
 

imagino que le puede servir cuando lo hace con el querySelectorAll ya que ambas funciones devuelven un NodeList, saludos

Lo he implementado de la siguiente manera, pero no me sale:

Código Javascript:

function minimizar(nombre_capa){
var myDivs = document.getElementByClassName(nombre_capa);
for (var i = 0; i < myDivs.length; i++) {
var actualDiv = myDivs[i];
actualDiv.style.display = "none"; //o el block cuando es para mostrar 
}
}
 

Y luego en el html he puesto:

Código HTML:

<input name="imagefield" type="image" src="images/botones/menos.button.png" onclick="minimizar('max1')" class="menos"/>
 
<div class="max1">
Recuadro a reducir
</div>
 

[carlos_belisario]

algún error que podamos ver??

[husseincak]

Iniciado por carlos_belisario

algún error que podamos ver??

No se me muestra ningun error, simplemente no funciona el codigo. Creo que el problema es al implementarlo en los botones. Me explico: en la etiqueta (supongo que pulsando en esa parte, todos los div con el class="max1" desaparecen)

Código:

onclick="minimizar('max1')"

no se si estoy llamando bien al codigo de javascript.

el codigo de javascript lo deje asi (tampoco se si lo tengo bien, porque no tengo ni idea. Simplemente como iba intuiendo lo iba poniendo):

Código Javascript:

function minimizar(nombre_capa){
var myDivs = document.getElementByClassName(nombre_capa);
for (var i = 0; i < myDivs.length; i++) {
* * var actualDiv = myDivs[i];
* * actualDiv.style.display = "none"; //o el block cuando es para mostrar * * * * * * * *
}
}
 

[emprear]

@husseincak

El problema principal nace de tu propia afirmación:

Yo no tengo ni idea de javascript

Creo que la lectura de un buen manual es lo más recomendado
http://librosweb.es
puede ser un buen punto de partida.

Eso de copiar código vaya a saber e donde y sin tener conocimiento de lo que representa no te va a llevar a ningún lado, salvo claro, que por casualidad dicho código se ajuste a lo que necesitas
De todas manera a manera de orientación te señalo que la solución a tu problema es más que sencilla y perfectamente podés utilizar diferentes id para identificar los elementos a ocultar ya que según señalas son dos elementos conocidos y definidos por vos mismo.

A ver una pequeña pista
Sabiendo que esto muestra el div de id="uno" e id="dos"

Código Javascript:

document.getElementById('uno').style.display = 'block';
document.getElementById('dos').style.display = 'block';
 

El resto es bastante fácil de deducir, y por lo de

Ajám, el problema es que no se como implementarlo :S

lo dicho, los manuales

Saludos

[husseincak]

@emprear muchas gracias, al final lo saque gracias a tí. Y de paso me pillo la pagina que me has recomendado, se ve muy buena.