<!-- Bootstrap 5 CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- Google Fonts - Roboto --> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet"> <!-- Ionicons --> <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script> <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script> <style> body { font-family: 'Roboto', sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; padding: 40px 0; } .faq-container { max-width: 800px; margin: 0 auto; } .faq-header { text-align: center; color: white; margin-bottom: 40px; } .faq-header h1 { font-weight: 700; font-size: 2.5rem; margin-bottom: 10px; } .faq-header p { font-weight: 300; font-size: 1.1rem; } .accordion-item { border: none; margin-bottom: 15px; border-radius: 12px !important; overflow: hidden; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .accordion-button { font-family: 'Roboto', sans-serif; font-weight: 500; font-size: 1.1rem; padding: 20px 25px; background-color: white; color: #333; border: none; display: flex; align-items: center; gap: 15px; } .accordion-button:not(.collapsed) { background-color: #667eea; color: white; box-shadow: none; } .accordion-button:focus { box-shadow: none; border: none; } .accordion-button::after { display: none; } .accordion-icon { font-size: 24px; min-width: 24px; } .accordion-arrow { margin-left: auto; font-size: 20px; transition: transform 0.3s ease; } .accordion-button:not(.collapsed) .accordion-arrow { transform: rotate(180deg); } .accordion-body { padding: 25px; background-color: #f8f9fa; font-weight: 400; line-height: 1.7; color: #555; } .accordion-button:hover { background-color: #f0f0f0; } .accordion-button:not(.collapsed):hover { background-color: #5568d3; } </style> </head> <body> <div class="container faq-container"> <div class="faq-header"> <h1>Frequently Asked Questions</h1> <p>Find answers to common questions below</p> </div> <div class="accordion" id="faqAccordion"> <!-- FAQ Item 1 --> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#faq1"> <ion-icon name="help-circle-outline" class="accordion-icon"></ion-icon> <span>What is Bootstrap 5?</span> <ion-icon name="chevron-down-outline" class="accordion-arrow"></ion-icon> </button> </h2> <div id="faq1" class="accordion-collapse collapse show" data-bs-parent="#faqAccordion"> <div class="accordion-body"> Bootstrap 5 is the latest major version of the popular front-end framework for building responsive, mobile-first websites. It includes new components, utilities, and improvements while removing jQuery dependency. </div> </div> </div> <!-- FAQ Item 2 --> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq2"> <ion-icon name="code-slash-outline" class="accordion-icon"></ion-icon> <span>How do I customize the accordion?</span> <ion-icon name="chevron-down-outline" class="accordion-arrow"></ion-icon> </button> </h2> <div id="faq2" class="accordion-collapse collapse" data-bs-parent="#faqAccordion"> <div class="accordion-body"> You can customize the accordion by modifying the CSS styles, changing colors, fonts, spacing, and adding custom icons. Bootstrap also provides various classes and utilities for easy customization. </div> </div> </div> <!-- FAQ Item 3 --> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq3"> <ion-icon name="color-palette-outline" class="accordion-icon"></ion-icon> <span>Can I use custom icons?</span> <ion-icon name="chevron-down-outline" class="accordion-arrow"></ion-icon> </button> </h2> <div id="faq3" class="accordion-collapse collapse" data-bs-parent="#faqAccordion"> <div class="accordion-body"> Absolutely! This example uses Ionicons, but you can easily swap them with Font Awesome, Material Icons, or any other icon library. Simply replace the ion-icon tags with your preferred icon markup. </div> </div> </div> <!-- FAQ Item 4 --> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq4"> <ion-icon name="phone-portrait-outline" class="accordion-icon"></ion-icon> <span>Is this accordion mobile responsive?</span> <ion-icon name="chevron-down-outline" class="accordion-arrow"></ion-icon> </button> </h2> <div id="faq4" class="accordion-collapse collapse" data-bs-parent="#faqAccordion"> <div class="accordion-body"> Yes! Bootstrap 5 is mobile-first by design, which means this accordion automatically adapts to different screen sizes and looks great on all devices, from smartphones to desktop computers. </div> </div> </div> <!-- FAQ Item 5 --> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq5"> <ion-icon name="rocket-outline" class="accordion-icon"></ion-icon> <span>Do I need JavaScript knowledge?</span> <ion-icon name="chevron-down-outline" class="accordion-arrow"></ion-icon> </button> </h2> <div id="faq5" class="accordion-collapse collapse" data-bs-parent="#faqAccordion"> <div class="accordion-body"> Not necessarily! Bootstrap handles the accordion functionality automatically. However, basic JavaScript knowledge is helpful if you want to add custom behaviors or integrate the accordion with other features. </div> </div> </div> </div> </div> <!-- Bootstrap 5 JS Bundle --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js">
Login to leave a comment
No comments yet. Be the first!
No comments yet. Be the first!