Open In App

How to always show first two rows in dynamic collapse using Bootstrap ?

Improve
Improve
Like Article
Like
Save
Share
Report

Bootstrap is an open-source front-end CSS framework used widely for the development of interactive websites. Bootstrap with HTML and JavaScript adds interactivity to the user interface. jQuery is a JS library used for the manipulation of HTML DOM, event handling, CSS animations, and Ajax. jQuery is also a free open source library used by more than 73% of developers. jQuery accomplishes tasks performed by JavaScript in a simplified fashion.

In this article, we will discuss the methods to show the first two rows in dynamic collapse. Bootstrap comes bundled with a wide variety of features and one of the features offered by Bootstrap is the collapsible component which is used to display and hide contents. Buttons or anchors are used as triggers to specific elements that we toggle. The following are the classes that help to collapse for displaying an element.

Classes:

  • .collapse: This class hides the content
  • .collapsing: This class is applied during transitions from a collapsed state to a visible state and vice-versa
  • .collapse.show: This class shows the content.

Accessibility: An accordion can demonstrate our requirement. The “card” component is used to extend the default collapse behavior to create an accordion. The aria-expanded attribute is added to the control element. This attribute denotes the current state of the collapsible element bound to the control.

If by default, the collapsible element is closed, the attribute is set to aria-expanded=”false”. If the collapsible element is to be displayed by default using the show class, then set aria-expanded=”true” on the control. This automatically toggles this attribute on the control based on the current state of the collapsible element.

If the control element is targeting a single collapsible element i.e. the data-target attribute is pointing to an “id” selector, then we should add the aria-controls attribute to the control element containing the “id” of the collapsible element. All the collapsible elements under the parent will be closed when the collapsible item is displayed.

Example 1:




<!DOCTYPE html>
<html>
 
<head>
    <!-- CSS only -->
    <link rel="stylesheet" href=
        integrity=
"sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
        crossorigin="anonymous">
 
    <!-- JS, Popper.js, jquery -->
        integrity=
"sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous">
    </script>
 
    <script src=
        integrity=
"sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
        crossorigin="anonymous">
    </script>
 
    <script src=
        integrity=
"sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
        crossorigin="anonymous">
    </script>
</head>
 
<body>
    <!-- Accordion wrapper starts -->
    <div class="accordion" id="accordionExample">
        <div class="card">
            <!-- Visible portion in collapsed state -->
            <div class="card-header" id="headingOne">
                <h2 class="mb-0">
                    <!-- no data-toggle, data-target,
                        aria-expanded, aria-controls
                        attributes are used -->
                    <!-- The toggling functionality is lost -->
                    <button class="btn btn-link" type="button">
                        Collapsible Item 1
                    </button>
                </h2>
            </div>
 
            <!-- Content to be displayed in open state -->
            <!-- data-parent attribute removed so that
                the cards are not dependent on each other -->
            <div id="collapseOne" class="collapse show"
                aria-labelledby="headingOne">
                <div class="card-body">
                    This is slot 1.
                </div>
            </div>
        </div>
        <div class="card">
            <!--visible portion in collapsed state-->
            <div class="card-header" id="headingTwo">
                <h2 class="mb-0">
                    <!-- no data-toggle, data-target,
                        aria-expanded, aria-controls
                        attributes are used -->
                    <!-- The toggling functionality is lost-->
                    <button class="btn btn-link collapsed"
                        type="button">
                        Collapsible Item 2
                    </button>
                </h2>
            </div>
 
            <!-- Content to be displayed in open state -->
            <!-- data-parent attribute removed so that the
                cards are not dependent on each other-->
            <div id="collapseTwo" class="collapse show"
                aria-labelledby="headingTwo">
                <div class="card-body">
                    This is slot 2.
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-header" id="headingThree">
                <h2 class="mb-0">
                    <!-- data-toggle, data-target,
                        aria-expanded, aria-controls
                        attributes are used -->
                    <!-- As a result the toggling
                        functionality are intact -->
                    <button class="btn btn-link collapsed"
                        type="button" data-toggle="collapse"
                        data-target="#collapseThree"
                        aria-expanded="false"
                        aria-controls="collapseThree">
                        Collapsible Item 3
                    </button>
                </h2>
            </div>
            <div id="collapseThree" class="collapse"
                aria-labelledby="headingThree"
                data-parent="#accordionExample">
                <div class="card-body">
                    This is slot 3.
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-header" id="headingFour">
                <h2 class="mb-0">
                    <!-- data-toggle, data-target, aria-expanded,
                        aria-controls attributes are used -->
                    <!-- The toggling functionality are intact -->
                    <button class="btn btn-link collapsed"
                        type="button" data-toggle="collapse"
                        data-target="#collapseFour"
                        aria-expanded="false"
                        aria-controls="collapseFour">
                        Collapsible Item 4
                    </button>
                </h2>
            </div>
            <div id="collapseFour" class="collapse"
                aria-labelledby="headingFour"
                data-parent="#accordionExample">
                <div class="card-body">
                    This is slot 4.
                </div>
            </div>
        </div>
    </div>
</body>
 
</html>


Output:

In the following example, the first two rows of the accordion always remain open by default. There is no toggling effect even when the row headings are clicked. This is because the first two rows do not have “data-toggle”, “data-target”, “aria-expanded”, “aria-controls” attributes which cause the toggling effect. As the data-parent attribute is also removed for the first two rows, they are independent of the remaining rows that display toggling functionality. The last two rows have all the required attributes intact, so they show the dynamic collapse functionality.

Approach: The second approach is very similar to the first one except that we create nested accordions and remove the data-toggle attribute for the first two rows. The first two rows have data-parent attribute. If the user wishes to add a collapse feature to the first two rows, add the data-toggle attribute. On click of the first-row, the heading will open up and collapse the second row and vice versa. The first two rows are independent of the last two rows as the data-parent attribute values for the first and second rows.




<!DOCTYPE html>
<html>
 
<head>
 
    <!-- CSS only -->
    <link rel="stylesheet" href=
        integrity=
"sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
        crossorigin="anonymous">
 
    <!-- JS, Popper.js, jquery and jQuery autocomplete -->
        integrity=
"sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous">
    </script>
    <script src=
        integrity=
"sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
        crossorigin="anonymous">
    </script>
    <script src=
        integrity=
"sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
        crossorigin="anonymous">
    </script>
</head>
 
<body>
    <!-- Accordion wrapper starts -->
    <div class="accordion" id="accordionExample">
        <div class="card">
            <!-- Visible portion in collapsed state -->
            <div class="card-header" id="headingOne">
                <h2 class="mb-0">
                    <!-- data-toggle attribute removed -->
                    <button class="btn btn-link" type="button"
                        data-target="#collapseOne"
                        aria-expanded="true"
                        aria-controls="collapseOne">
                        Collapsible Item 1
                    </button>
                </h2>
            </div>
            <!--content to be displayed in open state-->
            <div id="collapseOne" class="collapse show"
                aria-labelledby="headingOne"
                data-parent="#accordionExample">
                <div class="card-body">
                    This is slot 1.
                </div>
            </div>
        </div>
        <div class="card">
            <!-- Visible portion in collapsed state -->
            <div class="card-header" id="headingTwo">
                <h2 class="mb-0">
                    <!--data-toggle attribute removed-->
                    <button class="btn btn-link collapsed"
                        type="button" data-target="#collapseTwo"
                        aria-expanded="true"
                        aria-controls="collapseTwo">
                        Collapsible Item 2
                    </button>
                </h2>
            </div>
            <!-- Content to be displayed in open state -->
            <div id="collapseTwo" class="collapse show"
                aria-labelledby="headingTwo"
                data-parent="#accordionExample">
                <div class="card-body">
                    This is slot 2.
                </div>
            </div>
        </div>
        <!-- nested accordion -->
        <div class="accordion" id="accordionExample1">
            <div class="card">
                <!--visible portion in collapsed state-->
                <div class="card-header" id="headingThree">
                    <h2 class="mb-0">
                        <button class="btn btn-link collapsed"
                            type="button" data-toggle="collapse"
                            data-target="#collapseThree"
                            aria-expanded="false"
                            aria-controls="collapseThree">
                            Collapsible Item 3
                        </button>
                    </h2>
                </div>
                <!-- Content to be displayed in open state -->
                <div id="collapseThree" class="collapse"
                    aria-labelledby="headingThree"
                    data-parent="#accordionExample1">
                    <div class="card-body">
                        This is slot 3.
                    </div>
                </div>
            </div>
            <div class="card">
 
                <!-- Visible portion in collapsed state -->
                <div class="card-header" id="headingFour">
                    <h2 class="mb-0">
                        <button class="btn btn-link collapsed"
                            type="button" data-toggle="collapse"
                            data-target="#collapseFour"
                            aria-expanded="false"
                            aria-controls="collapseFour">
                            Collapsible Item 4
                        </button>
                    </h2>
                </div>
 
                <!-- Content to be displayed in open state -->
                <div id="collapseFour" class="collapse"
                    aria-labelledby="headingFour"
                    data-parent="#accordionExample1">
                    <div class="card-body">
                        This is slot 4.
                    </div>
                </div>
            </div>
        </div>
        <!-- end of nested accordion-->
    </div>
</body>
 
</html>


Output:

Video Output:



Last Updated : 30 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads