<!DOCTYPE html>
<html lang="en" data-bs-theme="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 5 Auto Modal + 5-Level Accordion</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
<style>
.thank-you-modal .modal-dialog {
max-width: 560px;
}
.thank-you-modal .modal-content {
border-radius: 1rem;
}
.thank-you-modal .modal-body {
padding: 0.85rem 0.9rem 0.9rem;
}
.thank-you-modal .modal-body h5 {
margin-bottom: 0.35rem;
}
.thank-you-modal .modal-body .fw-semibold {
margin-bottom: 0.15rem !important;
}
.thank-you-modal .modal-body .mb-2 {
margin-bottom: 0.35rem !important;
}
.thank-you-modal .modal-body .mb-3 {
margin-bottom: 0.5rem !important;
}
</style>
</head>
<body data-bs-theme="dark">
<!-- Page content -->
<div class="container py-5 text-center">
<div class="py-5">
<i class="bi bi-boxes text-primary" style="font-size:4rem;"></i>
<h1 class="text-white mt-3">Bootstrap Modal Demo</h1>
<p class="text-secondary">The modal with the 5-level accordion opens automatically.</p>
<button class="btn btn-primary btn-lg mt-3" data-bs-toggle="modal" data-bs-target="#accordionModal">
<i class="bi bi-arrows-expand"></i> Open Modal Again
</button>
</div>
</div>
<!-- ======================================================
AUTO-OPEN MODAL with 5-level accordion
====================================================== -->
<div id="accordionModal" class="modal fade" data-bs-backdrop="static" data-bs-keyboard="true" tabindex="-1">
<div class="modal-dialog modal-lg modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"><i class="bi bi-layers-fill text-primary me-2"></i>5-Level Nested Accordion</h5>
<button type="button" class="btn-close" id="closeBtnX"></button>
</div>
<div class="modal-body">
<div class="accordion" id="accordionRoot">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#l1">
<i class="bi bi-1-circle-fill me-2 text-primary"></i> Level 1 — Getting Started
</button>
</h2>
<div id="l1" class="accordion-collapse collapse show" data-bs-parent="#accordionRoot">
<div class="accordion-body">
<img src="https://picsum.photos/seed/l1/800/200" class="img-fluid rounded-3 mb-3"
alt="Level 1 banner">
<p>Welcome to the flat accordion demo. Each level is a sibling item.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#l2"
title="Expand Level 2">
<i class="bi bi-2-circle-fill me-2 text-success"></i> Level 2 — Setup
</button>
</h2>
<div id="l2" class="accordion-collapse collapse" data-bs-parent="#accordionRoot">
<div class="accordion-body">
<img src="https://picsum.photos/seed/l2/800/200" class="img-fluid rounded-3 mb-3"
alt="Level 2 banner">
<p>Configure your environment and dependencies.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#l3"
title="Expand Level 3">
<i class="bi bi-3-circle-fill me-2 text-info"></i> Level 3 — Configuration
</button>
</h2>
<div id="l3" class="accordion-collapse collapse" data-bs-parent="#accordionRoot">
<div class="accordion-body">
<img src="https://picsum.photos/seed/l3/800/200" class="img-fluid rounded-3 mb-3"
alt="Level 3 banner">
<p>Configuration files and environment variables.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#l4"
title="Expand Level 4">
<i class="bi bi-4-circle-fill me-2 text-warning"></i> Level 4 — Build Process
</button>
</h2>
<div id="l4" class="accordion-collapse collapse" data-bs-parent="#accordionRoot">
<div class="accordion-body">
<img src="https://picsum.photos/seed/l4/800/200" class="img-fluid rounded-3 mb-3"
alt="Level 4 banner">
<p>Webpack, Vite, and other build tool configuration.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#l5"
title="Expand Level 5">
<i class="bi bi-5-circle-fill me-2 text-danger"></i> Level 5 — Deployment
</button>
</h2>
<div id="l5" class="accordion-collapse collapse" data-bs-parent="#accordionRoot">
<div class="accordion-body">
<img src="https://picsum.photos/seed/l5/800/200" class="img-fluid rounded-3 mb-3"
alt="Level 5 banner">
<div class="alert alert-success d-flex align-items-center gap-2 mb-0">
<i class="bi bi-check-circle-fill fs-4"></i>
<span><strong>All set!</strong> Five flat accordion items, no nesting.</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<span class="text-secondary small" title="5 levels of accordion nesting">
<i class="bi bi-layers me-1"></i> 5 levels deep
</span>
<button class="btn btn-secondary" id="closeBtn">Close</button>
</div>
</div>
</div>
</div>
<!-- Standard Thank You Modal -->
<div class="modal fade thank-you-modal" id="thankYouModal" tabindex="-1" aria-hidden="true" data-bs-backdrop="static"
data-bs-keyboard="false">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content text-center bg-body text-body">
<div class="modal-body py-2 px-3" style="line-height: 1.5;">
<div class="fw-semibold mb-0 text-danger" style="line-height: 1.35; font-size: 1.15rem;">Thank You For
Visiting</div>
<div class="small mb-0" style="line-height: 1.35; margin-top: 6px;">
<div class="d-flex justify-content-center">
<a href="https://bcs.archman.us/contact" target="_blank" rel="noopener noreferrer"
style="text-decoration:none;display:inline-block;">
<img src="https://archman.us/images/bcs_logo_top_2.png" alt="Brooks Computing Systems"
style="height:84px;width:auto;max-width:100%;display:block;margin:0 auto;">
</a>
</div>
<div class="d-flex justify-content-center align-items-start gap-2 mt-2">
<a href="https://bcs.archman.us/contact" target="_blank" rel="noopener noreferrer"
style="text-decoration:none;">
<img src="https://bcs.archman.us/assets/images/usa_3a.gif" alt="USA"
style="height:16px;width:auto;position:relative;top:-1px">
</a>
<div class="text-start" style="line-height: 1.55;">
<div style="font-size:1.2em;font-weight:700;">Brooks Computing Systems - Jacksonville</div>
<a href="https://bcs.archman.us/contact" target="_blank" rel="noopener noreferrer" class="small"
style="display:block;font-size:1.15em;text-decoration:none;text-align:center;">Visit Brooks Computing
Systems</a>
<div class="small" style="font-size:1.15em;text-align:center;">Mainframes, Desktops & Web Sites
</div>
</div>
</div>
</div>
<div class="fw-semibold mb-0 text-primary" style="font-size: 1.0rem; line-height: 1.35; margin-top: 10px;">
Quality, Reliability & Service</div>
<div class="small mb-0 text-danger" style="font-size: 0.9rem; line-height: 1.35;" data-clock="long"></div>
<div class="small mb-2">
Visit <a class="btn btn-link p-0 align-baseline" href="https://bcs.archman.us/About">Visit Our Site</a>
</div>
<button type="button" class="btn btn-primary btn-sm px-3 py-1" data-bs-dismiss="modal">Done</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
var mainModal = new bootstrap.Modal(document.getElementById('accordionModal'));
var thankModal = new bootstrap.Modal(document.getElementById('thankYouModal'));
mainModal.show();
function closeAndThank() {
mainModal.hide();
thankModal.show();
}
document.getElementById('closeBtn').addEventListener('click', closeAndThank);
document.getElementById('closeBtnX').addEventListener('click', closeAndThank);
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[title]'));
tooltipTriggerList.map(function (el) {
return new bootstrap.Tooltip(el);
});
});
</script>
</body>
</html>