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
:
Ver originalfunction 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