How to always show first two rows in dynamic collapse using Bootstrap ?
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.
- .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.
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.