Achieving a full-height accordion with each pane taking up the entirety of the viewport using Bootstrap 4

Question

Achieving a full-height accordion with each pane taking up the entirety of the viewport using Bootstrap 4

https://i.sstatic.net/LqhXn.png I found this image which perfectly explains what I'm trying to achieve.

This is my current code:

<div class="accordion" id="myAccordion">
          <div class="card">
            <div class="card-header" id="section1" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
              <h2 class="mb-0">
                <i class="fa fa-search" aria-hidden="true"></i> Section 1
              </h2>
            </div>
        
            <div id="collapseOne" class="collapse" aria-labelledby="section1" data-parent="#myAccordion">
              <div class="card-body">
                Some content here
              </div>
            </div>
          </div>

          <div class="card">
            <div class="card-header" id="section2" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
              <h2 class="mb-0">
                 <i class="fa fa-briefcase" aria-hidden="true"></i> Section 2
              </h2>
            </div>
            <div id="collapseTwo" class="collapse" aria-labelledby="section2" data-parent="#myAccordion">
              <div class="card-body">
                some other content here
              </div>
            </div>
          </div>
            </div>
          </div>
        </div>

I have checked similar questions but none have provided a solution. I want the card-body of section1 to take full height based on the user's viewpoint, regardless of the content inside it, and push section2's card-header all the way to the bottom of the accordion. Any help or further references would be appreciated.

[This is the current result ->] https://i.sstatic.net/THCb9.png

html css bootstrap-4 accordion bootstrap-accordion

Answer 1

Answer №1

One innovative approach is to dynamically adjust the height of an accordion based on the viewport size. By setting the accordion to 100% viewport height and using flexbox in a column direction, the opened section can expand vertically with flex-grow:1;.

This technique eliminates the need to hard code specific heights, providing a more flexible design.

An ideal scenario would involve Pure CSS if Bootstrap allowed for additional customization options within the collapse plugin. Currently, when toggling the collapsible sections, only the .show class is applied to the specific collapsible element rather than its parent .card.

To address this limitation, JavaScript utilizing Bootstrap Collapse Events can be implemented:

$(function() {
    $('.accordion-vh-100 .collapse').on('show.bs.collapse', function () {
        $(this).parents('.card').addClass('show');
    });
    
    $('.accordion-vh-100 .collapse').on('hide.bs.collapse', function () {
        $(this).parents('.card').removeClass('show');
    });
});

By adding or removing the .show class on the parent .card element, it becomes possible to identify which card is currently open.

A new CSS class named .accordion-vh-100 is introduced to enable the accordion to occupy 100% of the viewport height. Additionally, the structure of .card-header is modified to an anchor tag for improved usability:

<div class="accordion accordion-vh-100" id="myAccordion">
    <div class="card"&g...

To style the new .accordion-vh-100 class accordingly, the following CSS rules are applied:

.accordion-vh-100 {
    height: 100vh;
    display: flex;
    flex-flow: column nowrap;
}

Finally, the expanded .card is set to grow proportionally by targeting the .show class within the .accordion-vh-100:

.accordion-vh-100 .card.show {
    flex-grow: 1;
}

View the demo here: https://jsfiddle.net/davidliang2008/b1duyLs8/24/

Answer 2

One innovative approach is to dynamically adjust the height of an accordion based on the viewport size. By setting the accordion to 100% viewport height and using flexbox in a column direction, the opened section can expand vertically with flex-grow:1;.

This technique eliminates the need to hard code specific heights, providing a more flexible design.

An ideal scenario would involve Pure CSS if Bootstrap allowed for additional customization options within the collapse plugin. Currently, when toggling the collapsible sections, only the .show class is applied to the specific collapsible element rather than its parent .card.

To address this limitation, JavaScript utilizing Bootstrap Collapse Events can be implemented:

$(function() {
    $('.accordion-vh-100 .collapse').on('show.bs.collapse', function () {
        $(this).parents('.card').addClass('show');
    });
    
    $('.accordion-vh-100 .collapse').on('hide.bs.collapse', function () {
        $(this).parents('.card').removeClass('show');
    });
});

By adding or removing the .show class on the parent .card element, it becomes possible to identify which card is currently open.

A new CSS class named .accordion-vh-100 is introduced to enable the accordion to occupy 100% of the viewport height. Additionally, the structure of .card-header is modified to an anchor tag for improved usability:

<div class="accordion accordion-vh-100" id="myAccordion">
    <div class="card"&g...

To style the new .accordion-vh-100 class accordingly, the following CSS rules are applied:

.accordion-vh-100 {
    height: 100vh;
    display: flex;
    flex-flow: column nowrap;
}

Finally, the expanded .card is set to grow proportionally by targeting the .show class within the .accordion-vh-100:

.accordion-vh-100 .card.show {
    flex-grow: 1;
}

View the demo here: https://jsfiddle.net/davidliang2008/b1duyLs8/24/

Answer 3

Answer №2

Take a look at this code snippet:

    <div class="accordion" id="myAccordion">
        <div class="card">
            <div class="card-header" id="section1" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                <h2 class="mb-0">
                    <i class="fa fa-search" aria-hidden="true"></i> Section 1
                </h2>
            </div>

            <div id="collapseOne" class="collapse" aria-labelledby="section1" data-parent="#myAccordion">
                <div class="card-body" style="height: 85vh;">
                    Some content here
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-header" id="section2" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                <h2 class="mb-0">
                    <i class="fa fa-briefcase" aria-hidden="true"></i> Section 2
                </h2>
            </div>
            <div id="collapseTwo" class="collapse" aria-labelledby="section2" data-parent="#myAccordion">
                <div class="card-body" style="height: 85vh;">
                    some other content here
                </div>
            </div>
        </div>
    </div>

We have utilized style="height: 85vh;" on

<div class="card-body">

to increase its height to 85% of the viewport height.

If you plan to add more cards, you may need to reduce this height in order to display additional card headers when one of the cards is expanded.

Answer 4

Take a look at this code snippet:

    <div class="accordion" id="myAccordion">
        <div class="card">
            <div class="card-header" id="section1" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                <h2 class="mb-0">
                    <i class="fa fa-search" aria-hidden="true"></i> Section 1
                </h2>
            </div>

            <div id="collapseOne" class="collapse" aria-labelledby="section1" data-parent="#myAccordion">
                <div class="card-body" style="height: 85vh;">
                    Some content here
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-header" id="section2" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                <h2 class="mb-0">
                    <i class="fa fa-briefcase" aria-hidden="true"></i> Section 2
                </h2>
            </div>
            <div id="collapseTwo" class="collapse" aria-labelledby="section2" data-parent="#myAccordion">
                <div class="card-body" style="height: 85vh;">
                    some other content here
                </div>
            </div>
        </div>
    </div>

We have utilized style="height: 85vh;" on

<div class="card-body">

to increase its height to 85% of the viewport height.

If you plan to add more cards, you may need to reduce this height in order to display additional card headers when one of the cards is expanded.

Achieving a full-height accordion with each pane taking up the entirety of the viewport using Bootstrap 4

Answer №1

Answer №2

Similar questions

Access and expand a bootstrap accordion with a hyperlink

What is the best way to conceal a row when a particular field is devoid of content?

Can we incorporate the radix-ui/colors variables into a CSS module file?

Styling a parent element when it is in focus using CSS3

Issue encountered when attempting to remove items from Redux store with onClick event

How can I apply an underline effect when hovering over navigation links in a responsive menu?

Utilize the cakePHP HTML input helper to assign specific values from 2 arrays

Can a text file be loaded into the title of a Bootstrap tooltip?

Issue with custom checkbox not changing when bootstrap collapse occurs

I am facing difficulty creating a dropdown menu with nested options that only appear when the user hovers over the main selection

Dropdown menu similar to the one utilized in Bootstrap

The chosen options will automatically populate the text-boxes that require dynamic summation

What could be causing the arrows on my card carousel to malfunction?

Having trouble with the dropdown multiselect feature in AngularJS?

Combining Bootstrap Vue: utilizing class names alongside HTML tags

Changing a button to text with PHP upon clicking

What are the best practices for preloading images, JavaScript, and CSS files?

Issue with Clicking Mouse to Display Content not Operational

Initial button click fails to trigger onclick event

"Utilizing the React library to implement an HTML component with a styled radio input that