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

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>
    <!-- Accordian 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>

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>
    <!-- Accordian 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 accordian-->
    </div>
</body>
  
</html>

chevron_right


Output:

Video Output:

full-stack-img




My Personal Notes arrow_drop_up


If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.