Comment créer un accordéon Bootstrap dynamique
L’accordéon (contenu réductible) est le meilleur moyen de basculer (masquer et afficher) un contenu volumineux. Une FAQ est l’un des exemples couramment utilisés de l’accordéon. L’accordéon est utilisé pour afficher plus de données dans moins d’espace. Il fonctionne sur un format de réduction-développement. En utilisant l’accordéon, on peut masquer et voir le contenu entre les différentes sections.
Bootstrap est livré avec de nombreux composants utiles qui peuvent facilement être intégrés sur le site Web. L’un d’eux est l’accordéon que nous utiliserons dans ce tutoriel. Si vous voulez voir comment fonctionne l’accordéon de Bootstrap, consultez l’ exemple ici.
Dans cet article, je vous montre comment fabriquer un accordéon Bootstrap dynamique. Pour créer l’accordéon dynamique, nous allons récupérer les résultats de la base de données et créer un accordéon avec ces enregistrements.
Comment ajouter un accordéon Bootstrap statique dans le site Web
L’ajout de l’accordéon Bootstrap statique sur le site Web est très simple. Il vous suffit de copier le code source fourni par Bootstrap et de le placer là où vous souhaitez afficher l’accordéon. Vous trouverez ci-dessous l’exemple de code d’ajout d’un accordéon bootstrap statique.
<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>Le code ci-dessus affichera l’accordéon Bootstrap statique sur votre page Web. Si vous préférez l’utiliser avec du contenu statique, il vous suffit de modifier le titre et le contenu du code HTML ci-dessus.
Cependant, le but de ce tutoriel est de créer un accordéon Bootstrap dynamique. Alors, lisez la suite, je vous montre comment dans les prochaines étapes.
Commencer
Supposons que vous ayez besoin d’afficher les faqs en accordéon. Pour les FAQ, nous avons besoin d’une table de base de données remplie de quelques entrées factices. Alors, créez une base de données appelée "bootstrap" et exécutez la requête ci-dessous pour créer une table à l’intérieur.
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;Après avoir créé une table, ajoutons-y quelques entrées factices. Ces entrées factices seront utilisées pour créer un accordéon dynamique.
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 partie suivante consiste à écrire du code pour connecter une base de données en PHP. Créez un fichier index.phpet ajoutez le code de connexion comme indiqué ci-dessous.
$con = mysqli_connect("localhost", "MYSQL_USERNAME", "MYSQL_PASSWORD", "bootstrap");
// Check connection
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL: ". mysqli_connect_error();
}Une fois que vous avez connecté la base de données avec succès, récupérez le résultat de la table de base de données dont nous aurons besoin dans un instant.
$sql = "SELECT * FROM faq ORDER BY id DESC";
$result = mysqli_query($con,$sql);Créer un accordéon Bootstrap dynamique
Vous avez récupéré les enregistrements de la table de la base de données et les avez affectés à la variable PHP $result. Nous allons parcourir cette variable et rendre les choses dynamiques.
Si vous regardez attentivement le code HTML de l’accordéon, vous remarquerez que le même type de balisage se répète. Tout en le rendant dynamique, nous devons modifier certains des attributs tels que id, class, aria-expanded, aria-controls, etc. dans ce balisage.
Vous trouverez ci-dessous le code qui génère un accordéon Bootstrap dynamique.
<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>Notre code final est le suivant.
<?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>C’est ça! J’espère que vous comprenez comment créer un accordéon Bootstrap dynamique. S’il vous plaît partager vos pensées et suggestions dans la section commentaires ci-dessous.
Articles Liés
- Glisser-déposer le téléchargement de fichiers à l’aide de JavaScript et PHP
- Téléchargement de fichiers Ajax avec PHP et jQuery
- Comment implémenter jQuery Datepicker avec Timepicker