How to always show first two rows in dynamic collapse using Bootstrap ?
Last Updated :
30 Mar, 2022
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:
html
<!DOCTYPE html>
<html>
<head>
<!-- CSS only -->
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity=
"sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
crossorigin="anonymous">
<!-- JS, Popper.js, jquery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity=
"sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
integrity=
"sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous">
</script>
<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
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>
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.
html
<!DOCTYPE html>
<html>
<head>
<!-- CSS only -->
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity=
"sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
crossorigin="anonymous">
<!-- JS, Popper.js, jquery and jQuery autocomplete -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity=
"sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
integrity=
"sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous">
</script>
<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
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>
Video Output:
Similar Reads
Bootstrap Tutorial
Bootstrap is a popular front-end framework for building responsive and mobile-first websites. It provides pre-designed CSS, JavaScript components, and utility classes to quickly create modern and consistent user interfaces.It Includes pre-built responsive grid systems for mobile-first design.Offers
4 min read
Bootstrap 5 Tutorial
Bootstrap 5 is a front-end framework that helps developers create responsive and visually appealing websites quickly and efficiently. Bootstrap 5 simplifies the process of web development with its intuitive design system and extensive components. This version includes improved responsiveness, stream
6 min read
Bootstrap 4 Tutorial
Bootstrap 4 is an open-source framework for creating responsive web applications. It is the most popular CSS framework for creating mobile-first websites. It is free to use we can directly integrate Bootstrap 4 into our project using CDN Links or with npm. Bootstrap 4 Tutorial is designed to help be
3 min read
Bootstrap 5
Bootstrap 5 Introduction
Bootstrap is a free and open-source collection of CSS and JavaScript/jQuery code used for creating dynamic websites layout and web applications. Bootstrap is one of the most popular front-end frameworks which has really a nice set of predefined CSS codes. Bootstrap uses different types of classes to
4 min read
Bootstrap 5 Progress
Bootstrap 5 is the latest major release by Bootstrap in which they have revamped the UI and made various changes. A progress bar is used to display the progress of a process on a computer. A progress bar displays how much of the process is completed and how much is left. You can add a progress bar o
5 min read
Bootstrap 5 Buttons
Bootstrap 5 Buttons are pre-styled components in the Bootstrap framework, offering consistent design and functionality. They streamline development by providing ready-to-use button styles, sizes, and behaviors, ensuring a cohesive and responsive user interface across web applications with minimal CS
3 min read
Bootstrap 5 Badges
Bootstrap 5 Badges are small components used to highlight specific information, typically in lists or inline with other content. They provide visual cues through colored backgrounds and customizable text, helping to draw attention to key details or status indicators within a webpage or application.
2 min read
Bootstrap 5 Alerts
Bootstrap 5 Alerts are customizable components used to convey important information to users. They come in various styles such as success, warning, danger, and info, providing visual feedback to users based on different actions or states within a web application. iframe { width: 100%; height: 450px;
2 min read
Bootstrap 5 Modal
Bootstrap 5 is the latest major release by Bootstrap in which they have revamped the UI and made various changes. Modals are used to add dialogs to your site for lightboxes, user notifications, or completely custom content. Modals are built with HTML, CSS, and JavaScript. They’re positioned over eve
7 min read
Bootstrap 4
Bootstrap 4 Introduction
Bootstrap is a free and open-source tool collection for creating responsive websites and web applications. It is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites. It solves many problems which we had once, one of which is the cross-browser compati
3 min read
Bootstrap 4 | Grid System
Bootstrap Grid System allows up to 12 columns across the page. You can use each of them individually or merge them together for wider columns. All combinations of values summing up to 12 can be used. Grid Classes: Bootstrap grid system contains five classes which are listed below: .col- It is used f
3 min read
Bootstrap 4 | Typography
Typography is a feature of Bootstrap for styling and formatting the text content. It is used to create customized headings, inline subheadings, lists, paragraphs, aligning, adding more design-oriented font styles, and much more. Bootstrap support global settings for the font stack, Headings and Link
3 min read
Bootstrap 4 | Colors
Text Colors: Bootstrap provides many classes to set the text color of an element. All classes of text colors are listed below: Example: This example uses text color class to set the color of text content. html <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap
2 min read
Bootstrap 4 | Tables
Bootstrap provides a series of classes that can be used to apply various styling to the tables such as changing the heading appearance, making the rows stripped, adding or removing borders, making rows hoverable, etc. Bootstrap also provides classes for making tables responsive. Simple Table: The .t
9 min read
Bootstrap 4 Images
Bootstrap 4 provides classes to style images responsively, including responsive images that automatically adjust the size based on screen width, image shapes such as rounded or circular, and image thumbnails with optional borders and captions, facilitating flexible and attractive image layouts. The
4 min read
Bootstrap Questions
How to design Bootstrap Fullscreen Select feature for Mobiles ?
In this article, we will learn how to design Bootstrap fullscreen select feature for mobile devices.It provides advanced HTML full screen select functionality.It provides in and out animations.It provides open and close events function callbacks.It provides CSS3 animated buttons, dropdowns and texts
3 min read
How to use Top Navigation with Left Navigation Bar using Bootstrap?
Using Top Navigation with Left Navigation Bar in Bootstrap means creating a layout with a responsive top navigation bar (typically for global site navigation) and a left sidebar for additional links or menus. This combines Bootstrap’s grid system, navbar classes, and custom CSS for layout management
4 min read
How to put two columns one below other in sidebar in Bootstrap?
To place two columns one below the other in a sidebar using Bootstrap, you can use Bootstrap's grid system. By setting up a vertical stacking of columns within a sidebar container, you ensure that the columns appear one below the other. This is achieved by using a single column width and placing the
5 min read
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
6 min read
How to add a black hover to an image using bootstrap?
Bootstrap is a popular CSS framework widely used by frontend developers to create interactive UI for web applications. Bootstrap is widely used because of its simplicity and ease to use. Bootstrap allows multiple utilities to make images interactive. One of these utilities can be changing the color
4 min read
How to create full width container using bootstrap?
Bootstrap offers two types of containers: fixed-width containers and full-width, fluid containers. The container-fluid class is used to create a full-width container that spans the entire width of the viewport, adjusting dynamically as the viewport size changes.Container Types in BootstrapFixed-Widt
3 min read
How to fit the image into modal popup using Bootstrap?
Modal plugin allows us to add a dialog popup window that is displayed on top of the current page. Bootstrap provides an easy, yet effective way to incorporate modal into our web pages. Modal can consist of any content along with a header and footer.Images can be fitted in modal popup using Bootstrap
2 min read
Bootstrap Examples
The following Bootstrap section contains a wide collection of Bootstrap examples. These examples are categorized based on the topics including basics, directives, functions, and many more. Each example may contain multiple approaches to solve the problem. Table of Content CustomizeLayoutContentForms
4 min read