Feature - FAQs

A fully editable Frequently Asked Questions with expandable and collapsible sections

What It Does#

Creates an expandable and collapsible FAQ section using Bootstrap accordion

The FAQs feature lets content editors build a list of questions and answers that render as a Bootstrap accordion. Each question appears as a clickable header that expands to reveal the answer, and clicking another question collapses the previous one.

This is a common pattern for support pages, product documentation, and any content where users need to scan through multiple topics without being overwhelmed by all the answers at once.

The accordion uses Bootstrap's flush variant for a cleaner look without outer borders.

How It Works#

A Block List of question/answer pairs rendered as a Bootstrap accordion

The feature uses a Block List property (featurePropertyFAQs) containing question/answer element types. Each element has a featurePropertyFAQsQuestion textbox and a featurePropertyFAQsAnswer textarea.

The view iterates through the Block List items and renders each as a Bootstrap accordion item. The accordion uses data-bs-parent to ensure only one answer is visible at a time — opening a new question automatically closes the previous one.

Unique IDs for the accordion and its items are generated from the block's Key property, ensuring multiple FAQ blocks on the same page don't conflict.

Editors manage FAQs through a simple Block List — just add question/answer pairs.

Example FAQs#

A selection of questions we are often asked

If you're looking for a flexible and user-friendly CMS, you might want to check out Umbraco. Umbraco is an open-source platform that lets you create and manage any kind of website, from blogs to e-commerce. You can customize it to suit your needs, and it has a vibrant community of developers and users who are always ready to help. Plus, it's free to use and easy to learn. What's not to love?

Bootstrap is awesome, you know? It's like a magic tool that makes your web design super easy and fast. You don't have to worry about writing tons of CSS or JavaScript code, because Bootstrap has it all ready for you. You just use their classes and components, and boom, you have a responsive and beautiful website. Plus, Bootstrap is compatible with all browsers and devices, so you don't have to deal with annoying bugs or glitches. Trust me, Bootstrap will save you a lot of time and hassle. You should definitely give it a try!

Hey, you might be wondering why you should use Umbootstrap for your next web project. Well, let me tell you, it's awesome! Umbootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development. It has everything you need to create responsive, modern, and beautiful websites that work on any device. Plus, it's super easy to customize and extend with your own code and plugins. Trust me, once you try Umbootstrap, you'll never go back to anything else!

featureFAQs.cshtml#

@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<BlockGridItem<FeatureFaqs>>

@{
    Layout = "_Layout_Features.cshtml";
    var content = Model.Content;
    var faqItems = content.FeaturePropertyFaqs;
}

@if (faqItems != null && faqItems.Any())
{
    foreach (var faq in faqItems.Select(faqItem => faqItem.Content))
    {
        <div class="accordion accordion-flush"
             id="n@(content.Key.ToString("N"))">
            <div class="accordion-item">
                <h2 class="accordion-header">
                    <button class="accordion-button collapsed"
                            data-bs-toggle="collapse"
                            data-bs-target="#n@(faq.Key.ToString("N"))">
                        @faq.Value("featurePropertyFAQsQuestion")
                    </button>
                </h2>
                <div id="n@(faq.Key.ToString("N"))"
                     class="accordion-collapse collapse"
                     data-bs-parent="#n@(content.Key.ToString("N"))">
                    <div class="accordion-body">
                        @faq.Value("featurePropertyFAQsAnswer")
                    </div>
                </div>
            </div>
        </div>
    }
}