¿Cómo hacer que un acordeón de arranque colapse al hacer clic en el div de encabezado?

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

Estoy usando Bootstrap 3. Así que en lugar de acordeón, es sólo un panel plegable. ¿Alguna idea de cómo hacer todo el panel clickable?

Author: Jeroen, 2013-10-08
Source

5 answers

Todo lo que necesita hacer es usar...

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

...en el elemento que desea hacer clic para activar el efecto contraer / expandir.

El elemento data-toggle="collapse" será el elemento para activar el efecto. El atributo 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 colapsable independiente, por ejemplo:

  • data-parent="#accordion"

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

.panel-heading {
    cursor: pointer;
}

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

 252
Author: grim,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-11-08 18:17:54

Otra forma es hacer que su <a> llene todo el espacio de la panel-heading. Usa este estilo para hacerlo:

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

Compruebe esta demo ( http://jsfiddle.net/KbQyx/).

Luego, al hacer clic en el encabezado, en realidad está haciendo clic en el <a>.

 65
Author: calfzhou,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-11-25 09:31:29

He notado un par de defectos menores en el jsfiddle de Grim.

Para conseguir que el puntero cambie a una mano para todo el panel use: 

.panel-heading {
   cursor: pointer;
}

He eliminado la etiqueta <a> (un problema de estilo) y he mantenido data-toggle="collapse" data-parent="#accordion" data-target="#collapse..." en panel-heading en todo momento.

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

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

 12
Author: WeaverSnap,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-10-21 16:11:51

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 calfzhou, ligeramente diferente.

 4
Author: Rhythm Ruparelia,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-31 02:17:00

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

Añadir este CSS personalizado 

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

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

El crédito va a este contestador de post.

La esperanza ayuda.

 1
Author: stom,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 12:02:50