Bootstrap 5
Accordeon
Collapse
Animation
Icones
Composant
Ui
Interactive
Snippet
Html Css Js
Bootstrap Icons
Masterclass complète des accordéons Bootstrap 5 : styles simples, imbriqués, colorés, avec icônes et animations personnalisées pour interfaces modernes.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="copyright" content="AngularForAll" />
<meta name="author" content="AngularForAll" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Cache-Control" content="public, max-age=604800" />
<title>Snippets Accordeon Bootstrap5 2026 05111000 | AngularForAll</title>
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
<style>
body { background-color: #f8f9fa; padding-bottom: 50px; }
.card { margin-bottom: 25px; border: none; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); }
.card-header { font-weight: bold; background-color: #fff; border-bottom: 1px solid #eee; }
.accordion-button:not(.collapsed) { background-color: #e7f1ff; color: #0d6efd; }
/* Custom Styles for some examples */
.acc-primary .accordion-button { background-color: #0d6efd; color: white; }
.acc-dark .accordion-button { background-color: #212529; color: white; }
.acc-dark .accordion-button::after { filter: invert(1); }
</style>
</head>
<body>
<div class="container py-5">
<div class="text-center mb-5">
<h1 class="display-4 fw-bold text-primary">10 Styles d'Accordéons</h1>
<p class="lead text-muted">Exemples variés utilisant Bootstrap 5 & Cards</p>
</div>
<div class="row">
<!-- 1. ACCORDÉON CLASSIQUE -->
<div class="col-md-6">
<div class="card">
<div class="card-header"><i class="bi bi-1-circle me-2"></i>Classique Standard</div>
<div class="card-body">
<div class="accordion" id="accClassic">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#c1">Item #1</button>
</h2>
<div id="c1" class="accordion-collapse collapse show" data-bs-parent="#accClassic">
<div class="accordion-body">Ceci est l'accordéon par défaut de Bootstrap.</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 2. STYLE FLUSH (Sans bordures) -->
<div class="col-md-6">
<div class="card text-white bg-dark">
<div class="card-header border-secondary text-white"><i class="bi bi-2-circle me-2"></i>Style "Flush" Épuré</div>
<div class="card-body">
<div class="accordion accordion-flush" id="accFlush">
<div class="accordion-item bg-dark text-white">
<h2 class="accordion-header">
<button class="accordion-button collapsed bg-dark text-white" type="button" data-bs-toggle="collapse" data-bs-target="#f1">Sans bordures externes</button>
</h2>
<div id="f1" class="accordion-collapse collapse" data-bs-parent="#accFlush">
<div class="accordion-body text-secondary">Idéal pour intégrer dans des containers étroits.</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 3. TOUJOURS OUVERT (Sans data-bs-parent) -->
<div class="col-md-6">
<div class="card">
<div class="card-header text-success"><i class="bi bi-3-circle me-2"></i>Toujours Ouvert</div>
<div class="card-body">
<div class="accordion" id="accAlwaysOpen">
<div class="accordion-item">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#ao1">Plusieurs items ouverts</button>
<div id="ao1" class="accordion-collapse collapse show">
<div class="accordion-body">Cliquer sur un autre ne fermera pas celui-ci.</div>
</div>
</div>
<div class="accordion-item mt-2">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#ao2">Item #2</button>
<div id="ao2" class="accordion-collapse collapse">
<div class="accordion-body">Contenu indépendant.</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 4. AVEC ICÔNES -->
<div class="col-md-6">
<div class="card">
<div class="card-header text-info"><i class="bi bi-4-circle me-2"></i>Avec Icônes</div>
<div class="card-body">
<div class="accordion" id="accIcons">
<div class="accordion-item">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#i1">
<i class="bi bi-gear me-3"></i> Paramètres
</button>
<div id="i1" class="accordion-collapse collapse show" data-bs-parent="#accIcons">
<div class="accordion-body text-center">
<i class="bi bi-cpu display-4 text-info"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 5. COLORÉ (Primary) -->
<div class="col-md-6">
<div class="card acc-primary">
<div class="card-header"><i class="bi bi-5-circle me-2"></i>Header Coloré</div>
<div class="card-body">
<div class="accordion" id="accColor">
<div class="accordion-item" style="border-color: #0d6efd;">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#co1">
Style Bleu MNXDEV
</button>
<div id="co1" class="accordion-collapse collapse show" data-bs-parent="#accColor">
<div class="accordion-body">Personnalisation via CSS pour matcher votre charte.</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 6. AVEC TABLEAU INTERNE -->
<div class="col-md-6">
<div class="card">
<div class="card-header"><i class="bi bi-6-circle me-2"></i>Contenu Riche (Tableau)</div>
<div class="card-body">
<div class="accordion" id="accTable">
<div class="accordion-item">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#ta1">Données Clients</button>
<div id="ta1" class="accordion-collapse collapse" data-bs-parent="#accTable">
<table class="table table-sm m-0">
<thead><tr><th>Nom</th><th>Score</th></tr></thead>
<tbody><tr><td>Said</td><td>98%</td></tr><tr><td>Mehdi</td><td>95%</td></tr></tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 7. NUMÉROTÉ (Steps) -->
<div class="col-md-6">
<div class="card">
<div class="card-header"><i class="bi bi-7-circle me-2"></i>Étapes du Processus</div>
<div class="card-body">
<div class="accordion" id="accSteps">
<div class="accordion-item">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#s1">
<span class="badge bg-primary me-2">1</span> Analyse
</button>
<div id="s1" class="accordion-collapse collapse show" data-bs-parent="#accSteps">
<div class="accordion-body">Étape initiale de planification.</div>
</div>
</div>
<div class="accordion-item">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#s2">
<span class="badge bg-secondary me-2">2</span> Exécution
</button>
<div id="s2" class="accordion-collapse collapse" data-bs-parent="#accSteps">
<div class="accordion-body">Développement de la solution.</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 8. DARK MODE SPECIFIQUE -->
<div class="col-md-6">
<div class="card acc-dark">
<div class="card-header"><i class="bi bi-8-circle me-2"></i>Version Sombre</div>
<div class="card-body">
<div class="accordion" id="accDark">
<div class="accordion-item bg-dark text-white border-secondary">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#d1">Interface Nuit</button>
<div id="d1" class="accordion-collapse collapse show" data-bs-parent="#accDark">
<div class="accordion-body">Parfait pour les dashboards de monitoring.</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 9. AVEC FORMULAIRE -->
<div class="col-md-6">
<div class="card">
<div class="card-header"><i class="bi bi-9-circle me-2"></i>Filtres / Formulaire</div>
<div class="card-body">
<div class="accordion" id="accForm">
<div class="accordion-item">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#fo1">Affiner la recherche</button>
<div id="fo1" class="accordion-collapse collapse" data-bs-parent="#accForm">
<div class="accordion-body">
<input type="text" class="form-control mb-2" placeholder="Rechercher...">
<button class="btn btn-sm btn-primary w-100">Appliquer</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 10. NESTED (Accordéon dans Accordéon) -->
<div class="col-md-6">
<div class="card">
<div class="card-header text-warning"><i class="bi bi-10-circle me-2"></i>Imbriqué (Nested)</div>
<div class="card-body">
<div class="accordion" id="accParent">
<div class="accordion-item">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#p1">Catégorie Parent</button>
<div id="p1" class="accordion-collapse collapse show" data-bs-parent="#accParent">
<div class="accordion-body">
<div class="accordion" id="accChild">
<div class="accordion-item">
<button class="accordion-button collapsed py-2" type="button" data-bs-toggle="collapse" data-bs-target="#ch1">Sous-catégorie</button>
<div id="ch1" class="accordion-collapse collapse">
<div class="accordion-body p-2 small">Contenu de niveau 2.</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div> <!-- End Row -->
</div>
<!-- Bootstrap 5 JS Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Télécharger le fichier source