Bootstrap
Accordion
Faq
Produit
Html
Variante d'accordéon Bootstrap 4 orientée FAQ produit avec style moderne, sections collapsibles et puces d'information.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="copyright" content="MEZGANI Said" />
<meta name="author" content="AngularForAll" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 4 Accordion Variant | AngularForAll</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<style>
body {
font-family: 'Segoe UI', sans-serif;
margin: 0;
background: linear-gradient(160deg, #f7fbff 0%, #eef3ff 100%);
color: #24344d;
}
.demo-wrap {
max-width: 900px;
margin: 40px auto;
padding: 0 15px;
}
.hero {
background: #ffffff;
border: 1px solid #e2ebff;
border-radius: 14px;
box-shadow: 0 10px 24px rgba(45, 88, 170, 0.08);
padding: 24px;
margin-bottom: 22px;
}
.hero h1 {
margin: 0 0 8px;
font-size: 1.5rem;
font-weight: 700;
}
.hero p {
margin: 0;
color: #51627d;
}
.accordion .card {
border: 1px solid #dbe6ff;
border-radius: 12px;
overflow: hidden;
margin-bottom: 10px;
box-shadow: 0 4px 14px rgba(45, 88, 170, 0.06);
}
.card-header {
padding: 0;
border-bottom: 0;
background: #fff;
}
.btn-acc {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
border: 0;
background: #fff;
padding: 14px 16px;
font-weight: 600;
color: #2b4165;
text-align: left;
cursor: pointer;
}
.btn-acc:hover {
background: #f5f9ff;
text-decoration: none;
color: #174ea6;
}
.btn-acc i {
transition: transform .25s ease;
color: #6d82a8;
}
.btn-acc[aria-expanded="true"] i {
transform: rotate(180deg);
color: #174ea6;
}
.card-body {
background: #fbfdff;
color: #4a5f80;
border-top: 1px solid #e6eeff;
}
.chip-row {
margin-top: 14px;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.chip {
display: inline-flex;
align-items: center;
padding: 5px 10px;
border-radius: 999px;
background: #eaf2ff;
color: #2d5bc0;
font-size: .82rem;
font-weight: 600;
}
.note {
margin-top: 16px;
font-size: .9rem;
color: #5d7091;
}
</style>
</head>
<body>
<div class="demo-wrap">
<section class="hero">
<h1>FAQ Produit - Accordéon Bootstrap 4</h1>
<p>Variante orientée produit avec style moderne, puces d'information et contenu structuré.</p>
</section>
<div class="accordion" id="productFaqAccordion">
<div class="card">
<div class="card-header" id="q1">
<button class="btn-acc" type="button" data-toggle="collapse" data-target="#a1" aria-expanded="true" aria-controls="a1">
Le produit est-il compatible mobile et desktop ?
<i class="fas fa-chevron-down"></i>
</button>
</div>
<div id="a1" class="collapse show" aria-labelledby="q1" data-parent="#productFaqAccordion">
<div class="card-body">
Oui. Le composant s'adapte automatiquement aux petits et grands écrans avec une structure responsive Bootstrap.
<div class="chip-row">
<span class="chip">Responsive</span>
<span class="chip">Bootstrap 4</span>
<span class="chip">Mobile First</span>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="q2">
<button class="btn-acc collapsed" type="button" data-toggle="collapse" data-target="#a2" aria-expanded="false" aria-controls="a2">
Comment personnaliser les couleurs ?
<i class="fas fa-chevron-down"></i>
</button>
</div>
<div id="a2" class="collapse" aria-labelledby="q2" data-parent="#productFaqAccordion">
<div class="card-body">
Modifiez les styles dans la section CSS: bordures, fonds, ombres et couleurs du bouton d'accordéon.
Vous pouvez aussi connecter ces valeurs à vos variables de design system.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="q3">
<button class="btn-acc collapsed" type="button" data-toggle="collapse" data-target="#a3" aria-expanded="false" aria-controls="a3">
Peut-on l'utiliser dans une page d'administration ?
<i class="fas fa-chevron-down"></i>
</button>
</div>
<div id="a3" class="collapse" aria-labelledby="q3" data-parent="#productFaqAccordion">
<div class="card-body">
Absolument. Cette structure fonctionne très bien pour des sections Paramètres, Aide, FAQ support ou onboarding.
</div>
</div>
</div>
</div>
<p class="note">Astuce: dupliquez une card pour ajouter autant de questions que nécessaire.</p>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js"></script>
</body>
</html>