[SOLUCIONADO] Ocultar article con JavaScript

[Anonimo12]

Buenas tardes:

Tengo un código HTML en el que, dentro del body existe la siguiente estructura:

Código HTML:

<section name="content" class="content">
   <article name="uno">
   </article>
   <article name="dos">
   </article>
   <article name="tres">
   </article>
 
<a href="#" onclick="visibilidad(\"uno\")">boton 1</a>
<a href="#" onclick="visibilidad(\"dos\")">boton 2</a>
<a href="#" onclick="visibilidad(\"tres\")">boton 3</a>
</section>
 

Quiero hacer una cosa muy sencilla (que ya he programado en varias ocasiones), y es mostrar/ocultar los "article" según si se presiona uno de los botones. Como podéis observar cada botón le pasa a la función (definida abajo) el name del article que se va a mostrar/ocultar.

Todo muy sencillo.

Ahora, la función no me deja obtener el objeto "section":

Código Javascript:

<script type="text/javascript">
   function visibilidad(name) {
      var section = document.getElementsByName("content"); //Obtengo la sección
      alert(section[0].name); //Quiero imprimir el nombre de la sección (no tiene ninguna utilidad, solo es para hacer la comprobación de que lo he cogido correctamente) y me salta la ventana del "alert" en blanco, es decir, no lo he obtenido
   }
</script>
 

Una aclaración: Entra correctamente en la función, el problema está en que no almaceno correctamente el objeto en la variable "section" o no imprimo como es debido el "name" en el "alert".

Le he dado mil vueltas, y es evidente que se trata de una tontería pero no lo encuentro.

Un saludo.

[Alexis88]

Para este caso, lo recomendable es acceder al atributo mediante el método getAttribute.

Código Javascript:

alert(section[0].getAttribute("name"));
 

Y pues, supongo que sabes cómo ocultar los artículos, pero de todos modos te dejo un pequeño ejemplo.

Código Javascript:

function visibilidad(name) {
    var article = document.getElementsByName(name)[0];    
  
    if (article.offsetHeight){
        article.style.height = 0;
        article.style.opacity = 0;
    }
    else{
        article.style.height = "5em";
        article.style.opacity = 1;
    }
}
 

De este modo, dejo la altura del artículo en cero y lo hago opaco para darle un efecto visual al cambio de estado, el cual se complementa con la propiedad transition de CSS3, por lo que dicho efecto solo surtirá efecto en aquellos navegadores que den soporte a esta tecnología.

Código CSS:

article{
    transition: .7s;
}
 

Demo

Saludos

[Anonimo12]

Muchas gracias, ha funcionado con el método "getAttribute()", sin embargo no funciona como yo quiero la ocultación de un elemento. Te explico:

Tengo el "section" y dentro los "article" tal y como aparecía en mi primer mensaje; el único matiz es que cuando muestre uno de los "article" quiero ocultar los demás, por eso mi idea es este sencillísimo código:

Código Javascript:

function mostrar(name){ //En el parámetro tengo el "name" del article que quiero mostrar, por tanto quiero ocultar todos los demás
            var contentSection = document.getElementsByName("content"); //Obtengo una referencia al "section"
            for(i = 0; i < contentSection.elements.length; i++) { //Gracias a contentSection.ELEMENTS debería recorrer todos los "article" que hay dentro del "section"
                if(contentSection.elements[i].name != name) contentSection.elements[i].style.display = none; //Si no es el que quiero mostrar, lo oculto cancelando su display
                else contentSection.elements[i].style.display = inline; //Si es el que quiero mostrar lo muestro cambiando el display
            }
        }
 

Muy sencillo, y después de darle mil vueltas he detectado que la instrucción que no funciona es cuando uso "contentSection.elements.length" y "contentSection.elements[i].name".

Gracias de nuevo. Un saludo.

[Alexis88]

Noto algunos errores. Intentas asignar los valores 'inline' y 'none' como si se trataran de variables cuando deberían de ser cadenas. Por otro lado, la propiedad elements solo es aplicable en formularios, no en secciones u otros elementos. También debes de tomar en cuenta que el método getElementsByName devuelve una lista de nodos, no devuelve a un solo elemento, por más que solo exista uno con el nombre buscado. En este caso, necesitas especificar el número de elemento a tomar y siendo la sección el único elemento con el nombre 'content' para este ejemplo, debes de añadir un [0] al final de la línea en la que lo tomas, con lo cual especificas que se trata del primer elemento encontrado y que en este caso, también es el único.

Te propongo hacerlo así:

Código Javascript:

function visibilidad(name){
    var seccion = document.getElementsByName("content")[0],
        articulos = seccion.getElementsByTagName("article"),
        total = articulos.length;
  
    for (var i = 0; i < total; i++){
        if (articulos[i].getAttribute("name") == name){
            articulos[i].style.opacity = 1;
            articulos[i].style.height = "5em";
        }
        else{
            articulos[i].style.opacity = 0;
            articulos[i].style.height = 0;
        }
    }
}
 

De este modo, tomo a la sección, luego de tomar a la sección, busco todos los artículos existentes en ella, luego, calculo el total de artículos existentes y los itero con un bucle, en el cual evaluaré el nombre de cada uno de ellos. Si alguno posee el mismo nombre del que se especificó en la búsqueda, se lo muestra, caso contrario, se lo oculta. Nuevamente uso las propiedades opacity y height para darle un efecto visual agradable, pero puedes seguir trabajando con la propiedad display.

Demo

Saludos

[Anonimo12]

Eres un maquinote, era eso lo que necesitaba.

Doy el tema por solucionado. Gracias de nuevo y un saludo.