Bootstrap
Accordion
Collapse
Faq
Html
Template Bootstrap 4 avec collapse simple, FAQ en accordéon et cibles multiples pour interfaces dynamiques.
<!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 Collapse Examples | AngularForAll</title>
<!-- Bootstrap 4 CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<!-- FontAwesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<style>
body { background-color: #f4f7f6; padding: 50px 0; font-family: 'Segoe UI', sans-serif; }
.section-title { font-weight: 700; margin-bottom: 30px; color: #333; border-left: 5px solid #007bff; padding-left: 15px; }
/* Custom Accordion Styling */
.card-header { background-color: #fff; border-bottom: none; cursor: pointer; }
.btn-link {
text-decoration: none !important;
font-weight: 600;
color: #444;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.btn-link:hover { color: #007bff; }
.accordion .card { border-radius: 10px; border: none; box-shadow: 0 2px 10px rgba(0,0,0,0.05); margin-bottom: 10px; }
/* Icon rotation when open */
.btn-link[aria-expanded="true"] i { transform: rotate(180deg); }
.btn-link i { transition: transform 0.3s; }
</style>
</head>
<body>
<div class="container">
<!-- EXEMPLE 1 : COLLAPSE SIMPLE -->
<div class="mb-5">
<h2 class="section-title">Collapse Simple (Bouton)</h2>
<p>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseSimple" aria-expanded="false" aria-controls="collapseSimple">
Afficher plus de détails
</button>
</p>
<div class="collapse" id="collapseSimple">
<div class="card card-body shadow-sm">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>
</div>
<!-- EXEMPLE 2 : ACCORDÉON (FAQ) -->
<div class="mb-5">
<h2 class="section-title">Accordéon (FAQ Style)</h2>
<div class="accordion" id="faqExample">
<!-- Item 1 -->
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button class="btn btn-link py-3" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Comment fonctionne la livraison ?
<i class="fas fa-chevron-down"></i>
</button>
</h2>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#faqExample">
<div class="card-body text-muted">
Notre service de livraison est disponible 24h/24 et 7j/7. Nous livrons dans plus de 50 pays à travers le monde avec un suivi en temps réel.
</div>
</div>
</div>
<!-- Item 2 -->
<div class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0">
<button class="btn btn-link collapsed py-3" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Quels sont les modes de paiement ?
<i class="fas fa-chevron-down"></i>
</button>
</h2>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#faqExample">
<div class="card-body text-muted">
Nous acceptons les cartes Visa, Mastercard, PayPal ainsi que les virements bancaires sécurisés.
</div>
</div>
</div>
<!-- Item 3 -->
<div class="card">
<div class="card-header" id="headingThree">
<h2 class="mb-0">
<button class="btn btn-link collapsed py-3" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Puis-je annuler ma commande ?
<i class="fas fa-chevron-down"></i>
</button>
</h2>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#faqExample">
<div class="card-body text-muted">
Oui, vous disposez de 14 jours pour annuler votre commande après réception, à condition que le produit soit dans son emballage d'origine.
</div>
</div>
</div>
</div>
</div>
<!-- EXEMPLE 3 : MULTI-TARGETS -->
<div class="mb-5">
<h2 class="section-title">Cibles Multiples</h2>
<p>
<button class="btn btn-outline-info" type="button" data-toggle="collapse" data-target="#multiCollapse1" aria-expanded="false" aria-controls="multiCollapse1">Toggle Bloc 1</button>
<button class="btn btn-outline-info" type="button" data-toggle="collapse" data-target="#multiCollapse2" aria-expanded="false" aria-controls="multiCollapse2">Toggle Bloc 2</button>
<button class="btn btn-dark" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapse1 multiCollapse2">Toggle les deux</button>
</p>
<div class="row">
<div class="col">
<div class="collapse multi-collapse" id="multiCollapse1">
<div class="card card-body bg-info text-white">
Contenu du premier bloc dynamique.
</div>
</div>
</div>
<div class="col">
<div class="collapse multi-collapse" id="multiCollapse2">
<div class="card card-body bg-info text-white">
Contenu du second bloc dynamique.
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Scripts obligatoires pour Bootstrap 4 (jQuery, Popper.js, Bootstrap.js) -->
<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>