[SOLUCIONADO] Accordion jquery - Apartados independientes

[degrar]

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!

[newboy_master]

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

Salu2.

[degrar]

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 :)

[newboy_master]

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.

[degrar]

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.

[newboy_master]

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

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

Código Javascript:

var currCont = $('.acc-content').eq(currIndex);
      if(currCont.css("height")=="0px")
          $('.acc-content').eq(currIndex).stop().animate({ height: targetHeight }, animTime);
      else
          $('.acc-content').eq(currIndex).stop().animate({ height: 0 }, animTime);
 

Salu2.

[degrar]

Hola newboy_master,

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