Bootstrap (Parte 18): Elementos colapsables

Redes sociales

Los elementos colapsables en Bootstrap te serán útiles cuando desees ocultar y mostrar contenidos más o menos extensos.

Bootstrap

Sintaxis básica

Para crear estos elementos colapsables debes de utilizar la clase .collapse en el elemento a colapsar u ocultar (por ejemplo con un elemento <div>).

Para controlar (mostrar/ocultar) el contenido colapasable, añade el atributo data-toggle=”collapse” a un elemento <a> o <button>. Añade también el atributo data-target=”#id” para conectar el botón al contenido colapsable.

Ejemplo

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
   <div class="container">
      <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Clic aqu&iacute; para m&aacute;s info</button>
      <div id="demo" class="collapse">
         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>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
   <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>

Resultado en el navegador



Nota: Para elementos <a>, usa el atributo href en vez del atributo data-target:

Ejemplo

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
   <div class="container">
       <a href="#demo" class="btn btn-success" data-toggle="collapse">Clic aqu&iacute; para m&aacute;s info</a>
       <div id="demo" class="collapse">
          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>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
   <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>

Resultado en el navegador



Por defecto, el elemento colapsable está oculto. Sin embargo, puedes añadir la clase .in para que, por defecto, el contenido se muestre:

Ejemplo

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
   <div class="container">
      <a href="#demo" class="btn btn-warning" data-toggle="collapse">Clic aqu&iacute; para ocultar/mostrar info</a>
      <div id="demo" class="collapse in">
         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>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
   <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>

Resultado en el navegador



Panel colapsable

El siguiente ejemplo muestra un panel colapsable:

Ejemplo

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
   <div class="container">
      <div class="panel-group">
         <div class="panel panel-default">
            <div class="panel-heading">
               <h4 class="panel-title">
                  <a data-toggle="collapse" href="#collapse1">Panel colapsable</a>
               </h4>
            </div>
            <div id="collapse1" class="panel-collapse collapse">
               <div class="panel-body">Cuerpo del panel</div>
               <div class="panel-footer">Pie del panel</div>
               </div>
           </div>
         </div>
      </div>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
   <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>    
</body>
</html>

Resultado en el navegador



Lista colapsable

El siguiente muestra una lista de opciones colapsable:

Ejemplo

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
 </head>
<body>
   <div class="container">
      <div class="panel-group">
         <div class="panel panel-default">
            <div class="panel-heading">
               <h4 class="panel-title">
                  <a data-toggle="collapse" href="#collapse1">Lista colapsable</a>
               </h4>
            </div>
            <div id="collapse1" class="panel-collapse collapse">
               <ul class="list-group">
                  <li class="list-group-item">Primero</li>
                  <li class="list-group-item">Segundo</li>
                  <li class="list-group-item">Tercero</li>
              </ul>
              <div class="panel-footer">Pie</div>
            </div>
         </div>
      </div>
   </div>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
   <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>    
</body>
</html>

Resultado en el navegador



Acordeón

El siguiente ejemplo, muestra un efecto acordeón, utilizando el componente panel. Usa el atributo data-parent para asegurarte que todos los elementos colapsables se cierran cuando uno de ellos se muestra.

Ejemplo

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
   <body>
      <div class="container">
         <div class="panel-group" id="accordion">
            <div class="panel panel-default">
               <div class="panel-heading">
                  <h4 class="panel-title">
                     <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Elemento 1</a>
                  </h4>
               </div>
               <div id="collapse1" class="panel-collapse collapse in">
                  <div class="panel-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="panel panel-default">
                  <div class="panel-heading">
                     <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Elemento 2</a>
                     </h4>
                 </div>
                 <div id="collapse2" class="panel-collapse collapse">
                    <div class="panel-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="panel panel-default">
               <div class="panel-heading">
                  <h4 class="panel-title">
                     <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Elemento 3</a>
                 </h4>
              </div>
              <div id="collapse3" class="panel-collapse collapse">
                 <div class="panel-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>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>    
</body>
</html>

Resultado en el navegador



Redes sociales

2 Comentarios

  1. Erick

    Excelete!! Venia buscando una ejemplo de “acordeon” y este es perfecto!!

    Muchas gracias!!!

    Responder
  2. juan arce

    Muy bueno. demasiado util

    Responder

Deja un comentario

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.