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

167

En un acordeón Bootstrap, en lugar de requerir un clic en el atexto, quiero hacer que se colapse al hacer clic en cualquier parte del panel-headingdiv.

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?

twitter-bootstrap  twitter-bootstrap-3 
— 9azul
fuente
Bueno, tienes una respuesta. Pero este enlace lo ayudará a encontrar diferentes estilos de menús de acordeón Bootstrap diseñadoreslib.com
— bootstrap

Respuestas:

292

Todo lo que necesitas hacer es usar ...

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

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

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

Opcionalmente, puede configurar data-parentsi desea crear un efecto de acordeón en lugar de un colapso independiente, por ejemplo:

  • data-parent="#accordion"

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

.panel-heading {
    cursor: pointer;
}

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

— severo
fuente
11
Parece que este debería ser el código predeterminado / demo. Mucho mejor que usar <a>.
— dbn
Este método no funciona para iPhone. según la respuesta a stackoverflow.com/questions/19866172/… debe ser <a> (ya que requiere el href) para que sea plegable en el iPhone ... ¿alguna idea?
— minovsky
2
@minovsky ¿Qué tal este JSFiddle actualizado: jsfiddle.net/Tcgyx/60 ? Lamentablemente no tengo un iPhone para probar. Actualizaré mi respuesta si esto funciona.
— sombrío
@grim gracias por el violín! No siempre funciona, pero déjame experimentar más y descubrir si puedo producir la falla de manera confiable.
— minovsky
1
@wutzebaer Podrías tener role="tab button"y el navegador interpretará el primero de la lista que entienda (muy probablemente tab). Sin embargo, no estoy seguro de cuál de los dos es mejor. Trate de encontrar el significado de los roles taby button, y eso le daría la respuesta sobre cuál elegir.
— sombrío
67

Otra forma es <a>llenar completamente todo el espacio del panel-heading. Use este estilo para hacerlo:

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

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

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

— Calfzhou
fuente
Una gran solución para aquellos de nosotros que usamos la biblioteca GWTBootstrap.
— snowe
No vi esto hasta que implementé una solución similar. Los cambios de CSS fueron el cambio menos invasivo para mí. Elegí display: inline-block, width: 100% y como estamos usando Glyphicons para los nuestros, a: before tiene margin-left: -10px y margin-right: 10px.
— Kirk Liemohn
1
Este método no funciona en dispositivos iOS, lo que suele ser una preocupación principal cuando se trabaja con Bootstrap.
— Jared
Jared, ¿puedes explicarlo? ¿Por qué no funciona esto está limitado a ciertas versiones de Safari?
— Dr. Jan-Philip Gehrcke
1
La ventaja de este método es que también funciona para la interfaz de usuario de Boostrap para AngularJS (donde no desea / necesita JS de Bootstrap).
— Dr. Jan-Philip Gehrcke
12

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

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

.panel-heading {
   cursor: pointer;
}

Eliminé la <a>etiqueta (un problema de estilo) y seguí data-toggle="collapse" data-parent="#accordion" data-target="#collapse..."en panel-headingtodo momento.

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

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

— WeaverSnap
fuente
Esto casi funciona. Los galones aparecen al revés cuando la página se carga y se corrigen después de expandir y contraer uno de los paneles.
— Connie DeCinko
@ConnieDeCinko Cambie panel-headinga panel-heading collapsedpara arreglar los galones al revés.
— Amy Barrett
5

Aquí hay una solución para Bootstrap4. Solo necesita poner la card-headerclase en la aetiqueta. Esta es una modificación de un ejemplo en W3Schools .

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="container">
  <div id="accordion">
    <div class="card">
      <a class="card-link card-header" data-toggle="collapse" href="#collapseOne" >
        Collapsible Group Item #1
      </a>
      <div id="collapseOne" class="collapse" data-parent="#accordion">
        <div class="card-body">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </div>
      </div>
    </div>
    <div class="card">
      <a class="collapsed card-link card-header" data-toggle="collapse" href="#collapseTwo">
        Collapsible Group Item #2
      </a>
      <div id="collapseTwo" class="collapse" data-parent="#accordion">
        <div class="card-body">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </div>
      </div>
    </div>
    <div class="card">
      <a class="card-link card-header" data-toggle="collapse" href="#collapseThree">
        Collapsible Group Item #3
      </a>
      <div id="collapseThree" class="collapse" data-parent="#accordion">
        <div class="card-body">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </div>
      </div>
    </div>
  </div>
</div>
Expandir fragmento

— usuario2233706
fuente
4

La solución simple sería eliminar el relleno .panel-headingy agregar 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.

— Ritmo Ruparelia
fuente
1

En realidad, mi panel tenía este ícono de flecha de estado de colapso e intenté 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 de colapso .

Agregue este CSS personalizado

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

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

El crédito va a este post respondedor.

La esperanza ayuda.

— shaijut
fuente
0

Aquí está el ejemplo de trabajo para Bootstrap 4.3 

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


<div class="accordion" id="accordionExample">
                <div class="card">
                    <div class="card-header" id="headingOne" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                        <h2 class="mb-0">
                            <button class="btn btn-link" type="button" >
                                Collapsible Group Item #1
                            </button>
                        </h2>
                    </div>

                    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
                        <div class="card-body">
                            
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header" id="headingTwo" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                        <h2 class="mb-0">
                            <button class="btn btn-link collapsed" type="button" >
                                Collapsible Group Item #2
                            </button>
                        </h2>
                    </div>
                    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
                        <div class="card-body">
                            
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header" id="headingThree" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                        <h2 class="mb-0">
                            <button class="btn btn-link collapsed" type="button" >
                                Collapsible Group Item #3
                            </button>
                        </h2>
                    </div>
                    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
                        <div class="card-body">
                            
                        </div>
                    </div>
                </div>
            </div>
Expandir fragmento

— Desarrollador
fuente
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.