Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Mantener un acordeon siempre abierto en twitter.boostrap

Estas en el tema de Mantener un acordeon siempre abierto en twitter.boostrap en el foro de Frameworks JS en Foros del Web. Estamos usando twitter.boostrap como framework para un proyecto: http://twitter.github.com/bootstrap/....html#collapse Tenemos un acordeon que se contruye con la clase .collapse La cuestion es que necesitamos que ...
  #1 (permalink)  
Antiguo 07/11/2012, 11:26
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 15 años, 8 meses
Puntos: 101
Mantener un acordeon siempre abierto en twitter.boostrap

Estamos usando twitter.boostrap como framework para un proyecto:
http://twitter.github.com/bootstrap/....html#collapse

Tenemos un acordeon que se contruye con la clase .collapse
La cuestion es que necesitamos que uno de los items quede siempre abierto. O sea, que si hay un item abierto y se lo clickea, no se cierre.
Con los metodos que provee boostrap (show/hide) para capturar eventos no veo manera. Se puede definir un evento click y "desbindear" el comportamiento original al vuelo, o hacer un return false o un algo para evitar que la seccion abierta se cierre?
  #2 (permalink)  
Antiguo 07/11/2012, 13:34
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 15 años, 8 meses
Puntos: 101
Respuesta: Mantener un acordeon siempre abierto en twitter.boostrap

Dejo el codigo para quien necesito convertir collapse en accordion.

Código Javascript:
Ver original
  1. var accordionHeaders = $('#accordion2 .accordion-heading');
  2.  
  3. $('.collapse').on('shown', function (e) {
  4.     var path = $(this).children('input.idContainer').attr('value');
  5.     $('#contact-info').load(path);
  6.        
  7.         // make an item always visible by removing the target class (and turning it back later)      
  8.         accordionHeaders.find('a.accordion-toggle').attr('data-toggle', 'collapse'); // collapsable one active-heading
  9.         accordionHeaders.filter('.active-heading').find('a.accordion-toggle').attr('data-toggle', 'non-collapse'); // active cannot be collapsed
  10.  
  11.         // fix for fast clicking
  12.         if ( !$(this).siblings('.accordion-heading').hasClass('active-heading') )
  13.             $(this).height(0).addClass('collapse');
  14. })
  15.  
  16. $('.collapse').on('show', function () {
  17.     $(this).siblings('.accordion-heading').addClass('active-heading');
  18. })
  19.  
  20. $('.collapse').on('hide', function () {
  21.     $(this).siblings('.accordion-heading').removeClass('active-heading');
  22. })
  23.  
  24. // disable hide feature in default item
  25. accordionHeaders.filter('.active-heading').find('a.accordion-toggle').attr('data-toggle', 'non-collapse');
  26.  
  27. // prevent href behavior on header links, when disabling toggle for active item
  28. accordionHeaders.find('a.accordion-toggle').bind('click', function(e){
  29.     e.preventDefault();
  30. });

Etiquetas: acordeon, html, siempre, time
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

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 20:09.