Componente de acordeón Javascript MDBootstrap

Posted on by Rudeus Greyrat

MDBootstrap es una biblioteca de interfaz de usuario Javascript basada en diseño de materiales y bootstrap que se utiliza para crear páginas web atractivas con su componente sencillo y fácil de usar. Es gratis para uso personal y comercial. En este artículo, sabremos cómo usar Accordion Component en Javascript MDBootstap.

MDBootstrap Accordion Component es un elemento que se contrae verticalmente para mostrar y ocultar el contenido mediante la implementación de las clases y el complemento de JavaScript.

Sintaxis:

<div class="accordion" id="gfg">
 <div class="accordion-item">
   <h2 class="accordion-header">
     <button>Accordion 1</button>
    </h2>
      <div id="gfg1" class="accordion-collapse collapse show">
            <div class="accordion-body"> Content </div>
      </div>
  </div>
</div

Acercarse:

  • Descarga Javascript MDBootstrap desde el sitio oficial .
  • Extraiga los archivos al directorio de trabajo actual.
  • En el archivo Index.html, especifique la ruta del archivo descargado en la etiqueta <head>.

<enlace rel=”icono” href=”img/mdb-favicon.ico” type=”image/x-icon” />
<enlace rel=”hoja de estilo” href=”https://use.fontawesome.com/releases /v5.15.2/css/all.css” />
<enlace rel=”hoja de estilo” href=”https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display =intercambiar”/>
<enlace rel=”hoja de estilo” href=”css/mdb.min.css” />
<script type=”text/javascript” src=”js/mdb.min.js”></script>
<tipo de script=”texto/javascript”></script>

Ejemplo 1: Este es el ejemplo básico que muestra cómo usar el componente de acordeón en MDBootstrap Javascript.

HTML

<!DOCTYPE html >
<html lang="en">
  
<head>
    <title>Javascript MDBootstrap List Group Component</title>
    <meta charset="UTF-8" />
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1, 
                   shrink-to-fit=no" />
    <link rel="icon" 
          href="img/mdb-favicon.ico" 
          type="image/x-icon" />
    <link rel="stylesheet"
          href=
"https://use.fontawesome.com/releases/v5.15.2/css/all.css" />
    <link rel="stylesheet"
          href=
"https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" />
    <link rel="stylesheet"
          href="css/mdb.min.css" />
    <script type="text/javascript" 
            src="js/mdb.min.js">
    </script>
</head>
  
<body>
    <h2 style="margin-left: 50px; 
               margin-top: 50px;">
        GeeksforGeeks
    </h2>
    <h4 style="margin-left: 50px;">
        MDBootstrap Javascript Accordion Component
    </h4>
    <div class="accordion" 
         id="gfg" 
         style="width: 1250px; 
                margin-left: 50px;">
        <div class="accordion-item">
            <h2 class="accordion-header" 
                id="headingOne">
            <button
              class="accordion-button"
              type="button"
              data-mdb-toggle="collapse"
              data-mdb-target="#gfg1"
              aria-controls="gfg1">
              Accordion 1
            </button>
          </h2>
            <div id="gfg1" 
                 class="accordion-collapse collapse show" 
                 data-mdb-parent="#gfg">
                <div class="accordion-body"> 
                 MDBootstrap is a Material Design and bootstrap-based
                 Angular UI library that is used to make good looking
                 webpages with its seamless and easy-to-use
                component. It is free for both personal & commercial use
            </div>
        </div>
        </div>
        <div class="accordion-item">
            <h2 class="accordion-header" id="headingTwo">
            <button
              class="accordion-button collapsed"
              type="button"
              data-mdb-toggle="collapse"
              data-mdb-target="#gfg2"
              aria-expanded="false"
              aria-controls="gfg2">
              Accordion 2
            </button>
          </h2>
            <div id="gfg2" 
                 class="accordion-collapse collapse"
                 data-mdb-parent="#gfg">
                <div class="accordion-body"> 
                    MDBootstrap is a Material Design and bootstrap-based
                    Angular UI library that is used to make good looking
                    webpages with its seamless and easy-to-use
                    component. It is free for both personal & commercial use
                </div>
            </div>
        </div>
        <div class="accordion-item">
            <h2 class="accordion-header">
            <button
              class="accordion-button collapsed"
              type="button"
              data-mdb-toggle="collapse"
              data-mdb-target="#gfg3"
              aria-expanded="false"
              aria-controls="gfg3">
              Accordion 3
            </button>
          </h2>
            <div id="gfg3" 
                 class="accordion-collapse collapse" 
                 data-mdb-parent="#gfg">
                <div class="accordion-body"> 
                    MDBootstrap is a Material Design and bootstrap-based
                    Angular UI library that is used to make good looking
                    webpages with its seamless and easy-to-use
                    component. It is free for both personal & commercial use
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Producción:

Javascript MDBootstrap Accordion Component

Componente de acordeón Javascript MDBootstrap

Ejemplo 2: en este ejemplo, sabremos cómo hacer un componente de acordeón al ras que elimine los bordes laterales del componente de acordeón en MDBootstrap Javascript.

HTML

<!DOCTYPE html >
<html lang="en">
  
<head>
    <title>Javascript MDBootstrap List Group Component</title>
    <meta charset="UTF-8" />
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1, 
                   shrink-to-fit=no" />
    <link rel="icon" 
          href="img/mdb-favicon.ico" 
          type="image/x-icon" />
    <link rel="stylesheet" 
          href=
"https://use.fontawesome.com/releases/v5.15.2/css/all.css" />
    <link rel="stylesheet" 
          href=
"https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" />
    <link rel="stylesheet" 
          href="css/mdb.min.css" />
    <script type="text/javascript" 
            src="js/mdb.min.js">
    </script>
</head>
  
<body>
    <h2 style="margin-left: 50px; 
               margin-top: 50px;">
        GeeksforGeeks
    </h2>
    <h4 style="margin-left: 50px;">
        MDBootstrap Javascript Accordion Component
    </h4>
    <div class="accordion accordion-flush" 
         id="gfg" 
         style="width: 1250px; 
                margin-left: 50px;">
        <div class="accordion-item">
            <h2 class="accordion-header" 
                id="headingOne">
            <button
              class="accordion-button"
              type="button"
              data-mdb-toggle="collapse"
              data-mdb-target="#gfg1"
              aria-controls="gfg1">
              Accordion 1
            </button>
          </h2>
            <div id="gfg1" 
                 class="accordion-collapse collapse show" 
                 data-mdb-parent="#gfg">
                <div class="accordion-body">
                    MDBootstrap is a Material Design and bootstrap-based 
                    Angular UI library that is used to make good looking 
                    webpages with its seamless and easy-to-use component. 
                    It is free for both personal & commercial use 
                </div>
            </div>
        </div>
        <div class="accordion-item">
            <h2 class="accordion-header" 
                id="headingTwo">
            <button
              class="accordion-button collapsed"
              type="button"
              data-mdb-toggle="collapse"
              data-mdb-target="#gfg2"
              aria-expanded="false"
              aria-controls="gfg2">
              Accordion 2
            </button>
          </h2>
            <div id="gfg2" 
                 class="accordion-collapse collapse" 
                 data-mdb-parent="#gfg">
                <div class="accordion-body">
                    MDBootstrap is a Material Design and bootstrap-based 
                    Angular UI library that is used to make good looking 
                    webpages with its seamless and easy-to-use component. 
                    It is free for both personal & commercial use 
                </div>
            </div>
        </div>
        <div class="accordion-item">
            <h2 class="accordion-header">
            <button
              class="accordion-button collapsed"
              type="button"
              data-mdb-toggle="collapse"
              data-mdb-target="#gfg3"
              aria-expanded="false"
              aria-controls="gfg3">
              Accordion 3
            </button>
          </h2>
            <div id="gfg3" 
                 class="accordion-collapse collapse" 
                 data-mdb-parent="#gfg">
                <div class="accordion-body">
                    MDBootstrap is a Material Design and bootstrap-based 
                    Angular UI library that is used to make good looking 
                    webpages with its seamless and easy-to-use component. 
                    It is free for both personal & commercial use 
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Producción:

Javascript MDBootstrap Accordion Component

Componente de acordeón Javascript MDBootstrap

Referencia: https://mdbootstrap.com/docs/standard/components/accordion/

Publicación traducida automáticamente

Artículo escrito por taran910 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 *