Foros del Web » Programando para Internet » Jquery »

[SOLUCIONADO] Accordion jquery - Apartados independientes

Estas en el tema de Accordion jquery - Apartados independientes en el foro de Jquery en Foros del Web. Hola a todos, Tengo un arcordeon hecho en Jquery, pero tengo un pequeño problema que seguramente alguno de ustedes lo tendra en un momento. Resulta ...
  #1 (permalink)  
Antiguo 23/07/2014, 08:17
 
Fecha de Ingreso: mayo-2012
Mensajes: 19
Antigüedad: 12 años, 6 meses
Puntos: 0
Accordion jquery - Apartados independientes

Hola a todos,

Tengo un arcordeon hecho en Jquery, pero tengo un pequeño problema que seguramente alguno de ustedes lo tendra en un momento.

Resulta que quiero que cada apartado actue de forma independiente sin que al hacer click a uno de ellos los otros se cierre, es decir, abrir y cerrar si afectar a los demas apartados del mismo acordeon.

Código HTML:
$(document).ready(function(){
  var animTime = 300,
      clickPolice = false;
  
  $(document).on('touchstart click', '.acc-btn', function(){
    if(!clickPolice){
       clickPolice = true;
      
      var currIndex = $(this).index('.acc-btn'),
          targetHeight = $('.acc-content-inner').eq(currIndex).outerHeight();
   
      $('.acc-btn h1').removeClass('selected');
      $(this).find('h1').addClass('selected');
      
      $('.acc-content').stop().animate({ height: 0 }, animTime);
      $('.acc-content').eq(currIndex).stop().animate({ height: targetHeight }, animTime);

      setTimeout(function(){ clickPolice = false; }, animTime);
    }
    
  });
  
});
¿Alguna idea o solucion para que de comporten de forma independiente? Yo he conseguido que se abra pero no que se cierre.

Muchas gracias!
  #2 (permalink)  
Antiguo 23/07/2014, 12:49
Avatar de newboy_master  
Fecha de Ingreso: enero-2008
Ubicación: Granada
Mensajes: 882
Antigüedad: 16 años, 10 meses
Puntos: 46
Respuesta: Accordion jquery - Apartados independientes

Publica el código html también e intento ayudarte.

Salu2.
__________________
@jslirola - Programador Web Freelance.
  #3 (permalink)  
Antiguo 24/07/2014, 01:41
 
Fecha de Ingreso: mayo-2012
Mensajes: 19
Antigüedad: 12 años, 6 meses
Puntos: 0
Respuesta: Accordion jquery - Apartados independientes

A continuación te pongo el codigo HTML.

Código HTML:
 <div class="acc-container">
    <div class="acc-btn">
      <h1 class="selected">Módulo 1</div>
    <div class="acc-content open">
      <div class="acc-content-inner">
        <p>Fechas: 18/08/2014 ao 18/09/2014</p>
       
      </div>
    </div>
    
    <div class="acc-btn">
      <h1>Módulo 2</h1></div>
    <div class="acc-content">
      <div class="acc-content-inner">
        <p>Fechas: 19/09/2014 ao 18/12/2014</p>
      </div>
    </div>
    
    <div class="acc-btn">
      <h1>Módulo 3</h1></div>
    <div class="acc-content">
      <div class="acc-content-inner">
        <p>Fechas: 19/12/2014 ao 18/04/2015</p>
      </div>
    </div>
    
    <div class="acc-btn">
      <h1>Módulo 4</h1></div>
    <div class="acc-content">
      <div class="acc-content-inner">
        <p>Fechas: 19/04/2015 ao 18/07/2015</p>
      </div>
    </div>
    <div class="acc-btn">
      <h1>Módulo 5</h1></div>
    <div class="acc-content">
      <div class="acc-content-inner">
        <p>Fechas: 19/07/2015 ao 18/08/2015</p>
      </div>
    </div>
    </div> 
Gracais por la ayuda :)
  #4 (permalink)  
Antiguo 24/07/2014, 08:53
Avatar de newboy_master  
Fecha de Ingreso: enero-2008
Ubicación: Granada
Mensajes: 882
Antigüedad: 16 años, 10 meses
Puntos: 46
Respuesta: Accordion jquery - Apartados independientes

Como no tenía el CSS he supuesto que todas las fechas están ocultas hasta que se pulsan, prueba esto:

http://jsfiddle.net/wGxYC/1/

Salu2.
__________________
@jslirola - Programador Web Freelance.
  #5 (permalink)  
Antiguo 25/07/2014, 01:47
 
Fecha de Ingreso: mayo-2012
Mensajes: 19
Antigüedad: 12 años, 6 meses
Puntos: 0
Respuesta: Accordion jquery - Apartados independientes

Disculpa, pensaba que con el codigo HTML tenias suficiente.

A continuación te pongo un enlace para que lo puedas ver tu mismo con el CSS.

http://jsfiddle.net/MCTWY/

Gracias.
  #6 (permalink)  
Antiguo 25/07/2014, 13:00
Avatar de newboy_master  
Fecha de Ingreso: enero-2008
Ubicación: Granada
Mensajes: 882
Antigüedad: 16 años, 10 meses
Puntos: 46
Respuesta: Accordion jquery - Apartados independientes

Aquí tienes: http://jsfiddle.net/MCTWY/2/

Solo he modificado la parte de jQuery añadiendo una condición:

Código Javascript:
Ver original
  1. var currCont = $('.acc-content').eq(currIndex);
  2.       if(currCont.css("height")=="0px")
  3.           $('.acc-content').eq(currIndex).stop().animate({ height: targetHeight }, animTime);
  4.       else
  5.           $('.acc-content').eq(currIndex).stop().animate({ height: 0 }, animTime);

Salu2.
__________________
@jslirola - Programador Web Freelance.
  #7 (permalink)  
Antiguo 27/07/2014, 11:06
 
Fecha de Ingreso: mayo-2012
Mensajes: 19
Antigüedad: 12 años, 6 meses
Puntos: 0
Respuesta: Accordion jquery - Apartados independientes

Hola newboy_master,

Perfecto! ahora si que funciona como lo había pensado, muchas gracias por tu ayuda!

Etiquetas: independientes
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 19:29.