Accordions

Use accordion elements to segment content and show/hide when clicking on tabs

Accordion

Use the .accordion-panel-header element and add the id of the targeted element to href, data-target and aria-controls attributes. The element that will be toggled is the .collapse from the following example:

At Themesberg, our mission has always been focused on bringing openness and transparency to the design process. We've always believed that by providing a space where designers can share ongoing work not only empowers them to make better products, it also helps them grow. We're proud to be a part of creating a more open culture and to continue building a product that supports this vision.

At Themesberg, our mission has always been focused on bringing openness and transparency to the design process. We've always believed that by providing a space where designers can share ongoing work not only empowers them to make better products, it also helps them grow. We're proud to be a part of creating a more open culture and to continue building a product that supports this vision.

At Themesberg, our mission has always been focused on bringing openness and transparency to the design process. We've always believed that by providing a space where designers can share ongoing work not only empowers them to make better products, it also helps them grow. We're proud to be a part of creating a more open culture and to continue building a product that supports this vision.

<div class="accordion" id="accordionExample">
    <div class="card border-light mb-0">
        <div class="card-header" id="headingOne">
            <h2 class="mb-0">
                <button class="btn btn-link btn-block d-flex justify-content-between text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                    <span class="h6 mb-0 font-weight-bold">What is the purpose of a FAQ?</span>
                    <span class="icon"><span class="fas fa-plus"></span></span>
                </button>
            </h2>
        </div>
        <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
            <div class="card-body">
                <p class="mb-0">
                    At Themesberg, our mission has always been focused on bringing openness and transparency to the design process. We've always believed that by providing a space where designers can share ongoing work not only empowers them to make better products, it also
                    helps them grow. We're proud to be a part of creating a more open culture and to continue building a product that supports this vision.
                </p>                           
            </div>
        </div>
    </div>
    <div class="card border-light mb-0">
        <div class="card-header" id="headingTwo">
            <h2 class="mb-0">
                <button class="btn btn-link btn-block d-flex justify-content-between text-left" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                    <span class="h6 mb-0 font-weight-bold">What is a FAQ document?</span>
                    <span class="icon"><span class="fas fa-plus"></span></span>
                </button>
            </h2>
        </div>
        <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
            <div class="card-body">
                <p class="mb-0">
                    At Themesberg, our mission has always been focused on bringing openness and transparency to the design process. We've always believed that by providing a space where designers can share ongoing work not only empowers them to make better products, it also
                    helps them grow. We're proud to be a part of creating a more open culture and to continue building a product that supports this vision.
                </p>                           
            </div>
        </div>
    </div>
    <div class="card border-light mb-0">
        <div class="card-header" id="headingThree">
            <h2 class="mb-0">
                <button class="btn btn-link btn-block d-flex justify-content-between text-left" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                    <span class="h6 mb-0 font-weight-bold">What are the top 10 interview questions?</span>
                    <span class="icon"><span class="fas fa-plus"></span></span>
                </button>
            </h2>
        </div>
        <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
            <div class="card-body">
                <p class="mb-0">
                    At Themesberg, our mission has always been focused on bringing openness and transparency to the design process. We've always believed that by providing a space where designers can share ongoing work not only empowers them to make better products, it also
                    helps them grow. We're proud to be a part of creating a more open culture and to continue building a product that supports this vision.
                </p>                           
            </div>
        </div>
    </div>
</div>