twitter bootstrap - not - ¿Cómo hacer que un acordeón Bootstrap colapse al hacer clic en el encabezado div?

tooltip bootstrap 4 example

Question

En un acordeón de Bootstrap, en lugar de requerir un clic en a texto, quiero hacer que se contraiga al hacer clic en cualquier parte de la div del panel-heading .

Estoy usando Bootstrap 3. Entonces, en lugar de acordeón, es solo un panel plegable. ¿Alguna idea de cómo hacer clic en todo el panel?

Answer 1

En realidad, mi panel tenía this ícono de flecha de estado de colapso y probé otras respuestas en esta publicación, pero la posición del ícono cambió, así que aquí está la solución con el ícono de flecha de estado colapsado .

Agregar este CSS personalizado

 .panel-heading 
  {
   cursor: pointer;
   padding: 0;
  }

 a.accordion-toggle 
 {
  display: block;
  padding: 10px  15px;
 }

El crédito va a this post respondedor.

Hope ayuda.

Answer 2

La solución simple sería eliminar el relleno de .panel-heading y agregarlo a .panel-title a .

.panel-heading {
    padding: 0;
}
.panel-title a {
    display: block;
    padding: 10px 15px;
}

Esta solución es similar a la anterior publicada por , ligeramente diferente.

Answer 3

Me he dado cuenta de un par de fallas menores en jsfiddle severo.

Para que el puntero cambie a una mano durante todo el uso del panel:

.panel-heading {
   cursor: pointer;
}

<a> etiqueta <a> (un problema de estilo) y guardé data-toggle="collapse" data-parent="#accordion" data-target="#collapse..." en panel-heading .

He agregado un método CSS para mostrar chevron, usando font-awesome.css en mi jsfiddle:

http://jsfiddle.net/weaversnap/7FqsX/1/

Answer 4

Otra forma es hacer que su <a> lleno llene todo el espacio del panel-heading del panel-heading . Use este estilo para hacerlo:

.panel-title a {
    display: block;
    padding: 10px 15px;
    margin: -10px -15px;
}

Verifique esta demostración ( http://jsfiddle.net/KbQyx/ ).

Luego, cuando haces clic en el encabezado, en realidad estás haciendo clic en <a> .

Answer 5

Todo lo que necesitas hacer es usar ...

• data-toggle="collapse"
• data-target="#ElementToExpandOnClick"

... en el elemento que desea hacer clic para activar el efecto de colapso / expansión.

El elemento con data-toggle="collapse" será el elemento para activar el efecto. El atributo de data-target indica el elemento que se expandirá cuando se active el efecto.

Opcionalmente puede establecer el data-parent si desea crear un efecto de acordeón en lugar de un collapsible independiente, por ejemplo:

• data-parent="#accordion"

También agregaría el siguiente CSS a los elementos con data-toggle="collapse" si no son etiquetas <a> , por ejemplo:

.panel-heading {
    cursor: pointer;
}

Aquí hay un jsfiddle con el html modificado de la documentación de Bootstrap 3 .