Cómo crear un acordeón Bootstrap dinámico
El acordeón (contenido plegable) es la mejor manera de alternar (ocultar y mostrar) contenido grande. Las preguntas frecuentes son uno de los ejemplos más utilizados del acordeón. El acordeón se utiliza para mostrar más datos en menos espacio. Funciona en un formato de contracción y expansión. Usando el acordeón uno puede ocultar y ver contenido entre diferentes secciones.
Bootstrap viene con muchos componentes útiles que se pueden integrar fácilmente en el sitio web. Uno de ellos es el acordeón que usaremos en este tutorial. Si desea ver cómo funciona el acordeón de Bootstrap, consulte el ejemplo aquí.
En este artículo, te muestro cómo hacer un acordeón Bootstrap dinámico. Para hacer el acordeón dinámico, obtendremos resultados de la base de datos y crearemos un acordeón con estos registros.
Cómo agregar un acordeón Bootstrap estático en un sitio web
Agregar el acordeón Bootstrap estático en el sitio web es muy fácil. Solo necesita copiar el código fuente proporcionado por Bootstrap y colocarlo donde desee mostrar el acordeón. A continuación se muestra el código de muestra para agregar un acordeón de arranque estático.
<html>
<head>
<title>Accordion Examples</title>
<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">
</head>
<body>
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</button>
</h2>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</button>
</h2>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
<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://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>El código anterior mostrará el acordeón Bootstrap estático en su página web. Si prefiere usarlo con contenido estático, solo necesita cambiar el título y el contenido del HTML anterior.
Sin embargo, el propósito de este tutorial es crear un acordeón Bootstrap dinámico. Entonces, sigue leyendo y te muestro cómo en los próximos pasos.
Empezando
Supongamos que necesita mostrar las preguntas frecuentes en acordeón. Para las preguntas frecuentes, necesitamos una tabla de base de datos llena con algunas entradas ficticias. Entonces, cree una base de datos llamada ‘bootstrap’ y ejecute la siguiente consulta para crear una tabla dentro de ella.
CREATE TABLE `faq` ( `id` int(11) NOT NULL AUTO_INCREMENT,
`title` text NOT NULL,
`content` text NOT NULL,
PRIMARY KEY (`id`)) ENGINE=InnoDB DEFAULT CHARSET=latin1;Después de crear una tabla, agreguemos algunas entradas ficticias. Estas entradas ficticias se utilizarán para crear un acordeón dinámico.
INSERT INTO `faq` (`id`, `title`, `content`) VALUES
(1, 'Question 1', 'This is answer 1.'),
(2, 'Question 2', 'This is answer 2.'),
(3, 'Question 3', 'This is answer 3.');La siguiente parte es escribir código para conectar una base de datos en PHP. Cree un archivo index.phpy agregue el código de conexión como se muestra a continuación.
$con = mysqli_connect("localhost", "MYSQL_USERNAME", "MYSQL_PASSWORD", "bootstrap");
// Check connection
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL: ". mysqli_connect_error();
}Una vez que haya conectado la base de datos correctamente, obtenga el resultado de la tabla de la base de datos que necesitaremos en un momento.
$sql = "SELECT * FROM faq ORDER BY id DESC";
$result = mysqli_query($con,$sql);Crea un acordeón Bootstrap dinámico
Ha obtenido los registros de la tabla de la base de datos y los ha asignado a la variable PHP $result. Recorreremos esta variable y haremos las cosas dinámicas.
Si observa detenidamente el código HTML del acordeón, notará que se repite el mismo tipo de marcado. Mientras lo hacemos dinámico, tenemos que modificar algunos de los atributos como id, class, aria-extended, aria-controls, etc. en este marcado.
A continuación se muestra el código que genera un acordeón Bootstrap dinámico.
<div class="accordion" id="accordionExample">
<?php
$i=1;
while($row = mysqli_fetch_assoc($result)) {
?>
<div class="card">
<div class="card-header" id="heading<?php echo $i; ?>">
<h2 class="mb-0">
<button class="btn btn-link <?php if($i>1) echo "collapsed"; ?>" type="button" data-toggle="collapse" data-target="#collapse<?php echo $i; ?>" aria-expanded="<?php echo ($i==1)? 'true': 'false'; ?>" aria-controls="collapse<?php echo $i; ?>">
<?php echo $row['title']; ?>
</button>
</h2>
</div>
<div id="collapse<?php echo $i; ?>" class="collapse <?php if($i==1) echo 'show'; ?>" aria-labelledby="heading<?php echo $i; ?>" data-parent="#accordionExample">
<div class="card-body">
<?php echo $row['content']; ?>
</div>
</div>
</div>
<?php
$i++;
}
?>
</div>Nuestro código final es el siguiente.
<?php
$con = mysqli_connect("localhost", "root", "", "bootstrap");
// Check connection
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL: ". mysqli_connect_error();
}
$sql = "SELECT * FROM faq ORDER BY id DESC";
$result = mysqli_query($con,$sql);
?>
<html>
<head>
<title>Accordion Examples</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
</head>
<body>
<div class="accordion" id="accordionExample">
<?php
$i=1;
while($row = mysqli_fetch_assoc($result)) {
?>
<div class="card">
<div class="card-header" id="heading<?php echo $i; ?>">
<h2 class="mb-0">
<button class="btn btn-link <?php if($i>1) echo "collapsed"; ?>" type="button" data-toggle="collapse" data-target="#collapse<?php echo $i; ?>" aria-expanded="<?php echo ($i==1)? 'true': 'false'; ?>" aria-controls="collapse<?php echo $i; ?>">
<?php echo $row['title']; ?>
</button>
</h2>
</div>
<div id="collapse<?php echo $i; ?>" class="collapse <?php if($i==1) echo 'show'; ?>" aria-labelledby="heading<?php echo $i; ?>" data-parent="#accordionExample">
<div class="card-body">
<?php echo $row['content']; ?>
</div>
</div>
</div>
<?php
$i++;
}
?>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>¡Eso es! Espero que entiendas cómo crear un acordeón Bootstrap dinámico. Comparta sus pensamientos y sugerencias en la sección de comentarios a continuación.
Artículos relacionados
- Arrastrar y soltar carga de archivos usando JavaScript y PHP
- Carga de archivos Ajax con PHP y jQuery
- Cómo implementar jQuery Datepicker con Timepicker