Bootstrap Collapse Question

How to Create a Bootstrap Accordion with Collapsible Elements

Bootstrap provides a responsive and easy way to add collapsible elements to your website. In this tutorial, we’ll walk through the process of creating an accordion component using Bootstrap, where you can hide and show content by clicking on each question.

1. HTML Structure for Accordion

The accordion will consist of collapsible elements that show and hide content when clicked. Each accordion item is enclosed in a .card class, and the collapsible content is wrapped inside the .collapse class.

Here’s the HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Collapse</title>

    <!-- External Stylesheets -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,500|Open+Sans" rel="stylesheet">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="styles.css">
    
    <!-- External Scripts -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
    <div class="row">
        <div class="col-lg-12">
            <h1 class="page-title">Bootstrap Collapse Question</h1>

            <!-- Accordion -->
            <div class="accordion" id="accordionExample">

                <!-- Question 1 -->
                <div class="card">
                    <div class="card-header" id="headingOne">
                        <h2 class="clearfix mb-0">
                            <a class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                <i class="fa fa-chevron-circle-down"></i> What is Bootstrap Framework?
                            </a>
                        </h2>
                    </div>
                    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
                        <div class="card-body">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                        </div>
                    </div>
                </div>

                <!-- Question 2 -->
                <div class="card">
                    <div class="card-header" id="headingTwo">
                        <h2 class="mb-0">
                            <a class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                <i class="fa fa-chevron-circle-down"></i> How to Create Responsive Website with Bootstrap?
                            </a>
                        </h2>
                    </div>
                    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
                        <div class="card-body">
                            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
                        </div>
                    </div>
                </div>

                <!-- Question 3 -->
                <div class="card">
                    <div class="card-header" id="headingThree">
                        <h2 class="mb-0">
                            <a class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                                <i class="fa fa-chevron-circle-down"></i> Does Bootstrap Framework Provide Cross-browser Support?
                            </a>
                        </h2>
                    </div>
                    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
                        <div class="card-body">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui.
                        </div>
                    </div>
                </div>

                <!-- Question 4 -->
                <div class="card">
                    <div class="card-header" id="headingFour">
                        <h2 class="mb-0">
                            <a class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
                                <i class="fa fa-chevron-circle-down"></i> Can I Use Bootstrap for Mobile App Development?
                            </a>
                        </h2>
                    </div>
                    <div id="collapseFour" class="collapse" aria-labelledby="headingFour" data-parent="#accordionExample">
                        <div class="card-body">
                            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

<!-- External JavaScript -->
<script src="javascript.js"></script>

</body>
</html>

2. Styling the Accordion

You can style the accordion to suit your website design. Here's a simple CSS file (styles.css) that gives the accordion a modern look:

body {
    background: #fff;
}

.accordion .card {
    background: none;
    border: none;
}

.accordion .card .card-header {
    background: none;
    border: none;
    padding: .4rem 1rem;
    font-family: "Roboto", sans-serif;
}

.accordion .card-header h2 span {
    float: left;
    margin-top: 10px;
}

.accordion .card-header .btn {
    color: #2f2f31;
    font-size: 1.04rem;
    text-align: left;
    position: relative;
    font-weight: 500;
    padding-left: 2rem;
}

.accordion .card-header i {
    font-size: 1.2rem;
    font-weight: bold;
    position: absolute;
    left: 0;
    top: 9px;
}

.accordion .card-header .btn:hover {
    color: #ff8300;
}

.accordion .card-body {
    color: #324353;
    padding: 0.5rem 3rem;
}

.page-title {
    margin: 3rem 0 3rem 1rem;
    font-family: "Roboto", sans-serif;
    position: relative;
}

.page-title::after {
    content: "";
    width: 510px;
    position: absolute;
    height: 3px;
    border-radius: 1px;
    background: #73bb2b;
    left: 0;
    bottom: -15px;
}

.accordion .highlight .btn {
    color: #74bd30;
}

.accordion .highlight i {
    transform: rotate(180deg);
}

3. JavaScript for Accordion Toggle

To enhance the accordion’s functionality, you’ll need a small JavaScript file (javascript.js) to manage the toggling effect when a user clicks on a question.

$(document).ready(function(){
    // Add minus icon for collapse element which is open by default
    $(".collapse.show").each(function(){
        $(this).prev(".card-header").addClass("highlight");
    });
    
    // Highlight open collapsed element 
    $(".card-header .btn").click(function(){
        $(".card-header").not($(this).parents()).removeClass("highlight");
        $(this).parents(".card-header").toggleClass("highlight");
    });
});

Conclusion

By following these steps, you can create an interactive, responsive accordion using Bootstrap. This accordion is not only functional but also stylish, making it ideal for FAQs, tutorials, or any content that requires collapsible sections. You can easily customize it further by adjusting the styles or adding more features using JavaScript.

Feel free to copy this code and add it to your website to improve the user experience with collapsible content!

Souy Soeng