Complemento de colapso de Bootstrap

El complemento Bootstrap Collapse ayuda a colapsar el contenido de la página web y alternar su visibilidad en la aplicación. El complemento ayuda a dividir el contenido de la página y facilita el colapso y también admite muchas opciones de contenido como un acordeón.

Enfoque: Bootstrap ofrece algunas funciones de JavaScript como un atributo y el complemento de colapso de JavaScript viene con un atributo llamado data-* .

Para alternar cualquier dato:

  • El atributo de alternancia de datos está configurado para contraerse en su botón de alternar.
  • El objetivo de datos se establece en la clase o id de un div que desea alternar.
  • Establezca la clase div en data-toggle=collapse   que desea alternar para que los datos no estén visibles inicialmente.

Ejemplo 1:

HTML

<!DOCTYPE html>
<html>
 
<head>
    <meta name="viewport" content=
        "width=device-width, initial-scale=1">
 
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
 
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>
 
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
    </script>
</head>
 
<body>
    <div class="container">
        <h2>Bootstrap collapse plugin</h2>
        <button class="btn" data-toggle="collapse"
            data-target="#disappear">
            Collapsible
        </button>
 
        <div id="disappear" class="collapse">
            This is a disappearing message
        </div>
    </div>
</body>
 
</html>

Producción:

Ejemplo 2: en un acordeón, es posible que necesite otro atributo llamado data-parent que asegure que todos los elementos contraíbles debajo del padre dado estén cerrados si se muestra uno de los elementos. Para tales casos, establezca el atributo principal de datos en el id o la clase del div del contenedor .

HTML

<!DOCTYPE html>
<html>
 
<head>
    <meta name="viewport" content=
        "width=device-width, initial-scale=1">
 
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
 
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>
 
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
    </script>
</head>
 
<body>
 
    <div class="container">
        <h2>Bootstrap collapse plugin</h2>
        <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">
                            Collapsible Number 1
                        </a>
                    </h4>
                </div>
                <div id="collapse1" class=
                    "panel-collapse collapse in">
                    <div class="panel-body">
                        This is the message of collapse1.
                    </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">
                            Collapsible Number 2
                        </a>
                    </h4>
                </div>
                <div id="collapse2" class=
                    "panel-collapse collapse">
                    <div class="panel-body">
                        This is the message of collapse2.
                    </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">
                            Collapsible Number 3
                        </a>
                    </h4>
                </div>
                <div id="collapse3" class=
                    "panel-collapse collapse">
                    <div class="panel-body">
                        This is the message of collapse3.
                    </div>
                </div>
            </div>
        </div>
    </div>
 
</body>
 
</html>

Producción:

Navegador compatible:

  • Google Chrome
  • Borde de Microsoft
  • Firefox
  • Ópera
  • Safari

Publicación traducida automáticamente

Artículo escrito por 1829022 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

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