Foros del Web » Programando para Internet » Javascript »

Hacer collapsible accordion JavaScript

Estas en el tema de Hacer collapsible accordion JavaScript en el foro de Javascript en Foros del Web. Hola a todos de nuevo. Utilizo un script que oculta otro div expandido del accordion para seguidamente expandir el que fue cliqueado, de modo que ...
  #1 (permalink)  
Antiguo 08/04/2013, 13:07
 
Fecha de Ingreso: agosto-2010
Mensajes: 25
Antigüedad: 14 años, 3 meses
Puntos: 0
Hacer collapsible accordion JavaScript

Hola a todos de nuevo.
Utilizo un script que oculta otro div expandido del accordion para seguidamente expandir el que fue cliqueado, de modo que haya solo un div con display=block simultáneamente.
El problema es que no se oculta el div visible al cliquear sobre sí mismo sino que solo funciona para ocultar otros divs, o sea no es "collapsible".
Este es el código. Quisiera saber qué cambiar aquí para que funcione como deseo.
Código Javascript:
Ver original
  1. function ocultarDivs(e) {
  2.                 console.info("OK");
  3.                 var elements = document.getElementsByClassName("accordion");
  4.                 for (var i=0; i < elements.length; i++) {
  5.                     var pNode = elements[i].getElementsByClassName("content");
  6.                     pNode[0].style.display = "none";
  7.                 };
  8.                 var toShow = e.getElementsByClassName("content");
  9.                 toShow[0].style.display = "block";
  10.             }
Muchas gracias por su ayuda.
  #2 (permalink)  
Antiguo 09/04/2013, 03:34
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 16 años, 5 meses
Puntos: 1012
Respuesta: Hacer collapsible accordion JavaScript

revisa este código

pd: no uses getElementsByClassName(), no existe para ie. en su lugar usa querySelector() o querySelectorAll()
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #3 (permalink)  
Antiguo 09/04/2013, 03:38
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Sabadell
Mensajes: 4.897
Antigüedad: 16 años, 8 meses
Puntos: 574
Respuesta: Hacer collapsible accordion JavaScript

Código Javascript:
Ver original
  1. function ocultarDivs(classe) {
  2.    var elements = document.getElementsByTagName("div");
  3.    for (var i=0; i < elements.length; i++) {
  4.      if(elements[i].className=classe){
  5.        if(elements[i].style.display=="none"){
  6.           elements[i].style.display="";
  7.        }else{
  8.           elements[i].style.display="none";
  9.        }
  10.      }
  11.    }
  12. }

<div class="accordion" onclick="ocultarDivs('accordion')">primer div</div>
<div class="accordion" onclick="ocultarDivs('accordion')">segundo div</div>

Algo asi te serviria... esto ocultara todos los elementos div con class="accordion" que esten visibles y mostrará todos los ocultos. Si lo que quieres es ocultar el actual y mostrar el siguiente tendràs que trabajar con los id y establecer alguna logica de orden.... pero como no se lo que quieres no voy a suponer.
__________________
Quim
--------------------------------------------------
Ayudar a ayudar es una buena práctica!!! Y da buenos resultados.

Última edición por quimfv; 09/04/2013 a las 03:44 Razón: Elimino getElementsByClassName()
  #4 (permalink)  
Antiguo 10/04/2013, 00:03
 
Fecha de Ingreso: abril-2013
Ubicación: Leon
Mensajes: 4
Antigüedad: 11 años, 7 meses
Puntos: 0
JQuery UI

Puedes darte una vuelta por la documentación de JQuery, tiene una muy buena función para eso.
http://jqueryui.com/accordion/
  #5 (permalink)  
Antiguo 22/04/2013, 08:11
 
Fecha de Ingreso: agosto-2010
Mensajes: 25
Antigüedad: 14 años, 3 meses
Puntos: 0
Respuesta: Hacer collapsible accordion JavaScript

Gracias a todos por la respuesta.
Como habrán notado me tomé mi tiempo para responder.
Al final terminé haciéndolo con jQuery. Mi idea era hacerlo con JavaScript porque lo entiendo un poco mejor y para no andar cargando librerías distintas para la misma aplicación, pero no tuve otra.
También me sirvió la sugerencia de "querySelector", no sabía que no getElements no andaba en IE.

Etiquetas: funcion
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 18:40.