Saltar al contenido

Activar un Bootstrap .collapse(‘toggle’) a través de un evento

Posterior a de una extensa recopilación de datos dimos con la respuesta esta interrogante que suelen tener ciertos de nuestros usuarios. Te ofrecemos la respuesta y nuestro deseo es serte de mucha ayuda.

Solución:

¿Qué hay de hacerlo al revés y abrir el siguiente acordeón cuando la última entrada en el acordeón actual se difumina?

$('.accordion-inner input:last').on('blur', function() 
    $('#collapseAcct').collapse('show');
);

Y, por supuesto, le dio a todos los elementos identificaciones únicas, y no a todos collapseAcct

Tuve una situación en la que necesitaba hacer que los paneles de arranque se comportaran como un formulario tan abierto al enfocar o al pasar el mouse.

Acabo de activar el evento de clic.

código:

$('.panel-title a').bind('mouseover focus',function()
$(this).trigger('click');
);

Esto debería ayudarlo a comenzar: http://jsfiddle.net/Xbg4n/45/

El ejemplo no usa .collapse, pero solo .slideUp y .slideDown… deberían ser lo suficientemente fáciles de intercambiar con colapso, pero funcionan para propósitos de ejemplo. Lo que realmente obtienes de esto es la orientación, que creo que es lo que principalmente estabas preguntando. También agregué un poco a esto para volver al primer contenedor, pero me detuve allí. Debe agregar un mejor control sobre el enfoque (evite el enfoque en las etiquetas de anclaje y fuerce el enfoque cuando regrese al primer contenedor).

No proporcionó el código de muestra HTML completo, así que llené los espacios en blanco:

el JS:

$('.accordion-group').each(function()
var topcontainer = $(this);
topcontainer.find('input:last').each(function()
    $(this).blur(function()
        //swap slideup and slidedown for 'collapse' as appropriate
        var nextag = topcontainer.next('.accordion-group');
        var lastag = $('.accordion-group').last();
        if(topcontainer.is(lastag))
            var nextag = $('.accordion-group').first();
        
        var showag = nextag.find('.collapse');
        var hideag = topcontainer.find('.collapse');
        showag.slideDown();
        hideag.slideUp();
    );
);

);

El CSS:

#collapseAcct2 
    display:none;

#collapseAcct3 
    display:none;

Si entiendes que te ha resultado de provecho este post, sería de mucha ayuda si lo compartieras con más juniors de esta manera nos ayudas a dar difusión a este contenido.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *