Is there a way to ensure the collapsible item stays in its position?

I'm encountering an issue with the display of items within collapsible cards. Here is what it currently looks like:

https://i.sstatic.net/DM8sX.png

And this is how I want it to appear:

https://i.sstatic.net/BXGpW.png

Is there a way to achieve the desired layout using Bootstrap's Grid or Flex Layout?

Here is my code example (demo)

<div class="container">
    <div class="row">
        <div class="card col-12 col-md-4">
            <div id="accordion-1">
                <div class="card-header" id="heading-1">
                    <h5 class="mb-0">
                        <button class="btn btn-link" data-toggle="collapse" data-target="#collapse-1" aria-expanded="true" aria-controls="collapse-1">
                            Collapsible #1
                        </button>
                    </h5>
                </div>

                <div id="collapse-1" class="collapse" aria-labelledby="heading-1" data-parent="#accordion-1">
                    <div class="card-body">
                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                    </div>
                </div>
            </div>
        </div>

        <div class="card col-12 col-md-4">
            <div id="accordion-2">
                <div class="card-header" id="heading-2">
                    <h5 class="mb-0">
                        <button class="btn btn-link" data-toggle="collapse" data-target="#collapse-2" aria-expanded="true" aria-controls="collapse-2">
                            Collapsible #2
                        </button>
                    </h5>
                </div>

                <div id="collapse-2" class="collapse" aria-labelledby="heading-2" data-parent="#accordion-2">
                    <div class="card-body">
                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                    </div>
                </div>
            </div>
        </div>    
        
        <div class="card col-12 col-md-4">
            <div id="accordion-3">
                <div class="card-header" id="heading-3">
                    <h5 class="mb-0">
                        <button class="btn btn-link" data-toggle="collapse" data-target="#collapse-3" aria-expanded="true" aria-controls="collapse-3">
                            Collapsible #3
                        </button>
                    </h5>
                </div>

                <div id="collapse-3" class="collapse" aria-labelledby="heading-3" data-parent="#accordion-3">
                    <div class="card-body">
                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                    </div>
                </div>
            </div>
        </div>   
                    
        <div class="card col-12 col-md-4">
            <div id="accordion-4">
                <div class="card-header" id="heading-4">
                    <h5 class="mb-0">
                        <button class="btn btn-link" data-toggle="collapse" data-target="#collapse-4" aria-expanded="true" aria-controls="collapse-4">
                            Collapsible #4
                        </button>
                    </h5>
                </div>

                <div id="collapse-4" class="collapse" aria-labelledby="heading-4" data-parent="#accordion-4">
                    <div class="card-body">
                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                    </div>
                </div>
            </div>
        </div>   
        
        <div class="card col-12 col-md-4">
            <div id="accordion-5">
                <div class="card-header" id="heading-5">
                    <h5 class="mb-0">
                        <button class="btn btn-link" data-toggle="collapse" data-target="#collapse-5" aria-expanded="true" aria-controls="collapse-5">
                            Collapsible #5
                        </button>
                    </h5>
                </div>

                <div id="collapse-5" class="collapse" aria-labelledby="heading-5" data-parent="#accordion-5">
                    <div class="card-body">
                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                    </div>
                </div>
            </div>
        </div>                      
    </div>
</div>

Your assistance in resolving this matter is greatly appreciated :)

javascripthtmlcsslayoutbootstrap-4

Answer №1

If you want to display your cards in a more visually appealing way, consider stacking them in 3 columns instead of placing each card in its own column:

<div class="row">
    <div class="col-12 col-md-4">
        <div class="card">#1</div>
        <div class="card">#4</div>
    </div>
    <div class="col-12 col-md-4">
        <div class="card">#2</div>
        <div class="card">#5</div>
    </div>
    <div class="col-12 col-md-4">
        <div class="card">#3</div>
    </div>
</div>

https://i.sstatic.net/jIU6X.png

Check out the demo here: https://jsfiddle.net/davidliang2008/w3t2qvzs/4/

Answer №2

To achieve a structured layout, it is recommended to divide the content into 3 columns.

For an example of this structure, check out: https://jsfiddle.net/ishnechmad/b94a8xnp/2/

<div class="container">
<div class="row">
<div class="col-12 col-md-4">
    <div class="row">
        <div id="accordion-1" class="col">
            <div class="card-header" id="heading-1">
                <h5 class="mb-0">
                    <button class="btn btn-link" data-toggle="collapse" data-target="#collapse-1" aria-expanded="true" aria-controls="collapse-1">
                                Collapsible #1
                    </button>
                </h5>
            </div>

            <div id="collapse-1" class="collapse" aria-labelledby="heading-1" data-parent="#accordion-1">
                <div class="card-body">
                    Content for collapsible #1 goes here
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div id="accordion-2" class="col">
                    <div class="card-header" id="heading-2">
                        <h5 class="mb-0">
                            <button class="btn btn-link" data-toggle="collapse" data-target="#collapse-2" aria-expanded="true" aria-controls="collapse-2">
                                Collapsible #2
                            </button>
                        </h5>
                    </div>

                    <div id="collapse-2" class="collapse" aria-labelledby="heading-2" data-parent="#accordion-2">
                        <div class="card-body">
                            Content for collapsible #2 goes here
                        </div>
                    </div>
                </div>
    </div>
</div>
<div class="card col-12 col-md-4">
    <div class="row">
        <div id="accordion-3" class="col">
                    <div class="card-header" id="heading-3">
                        <h5 class="mb-0">
                            <button class="btn btn-link" data-toggle="collapse" data-target="#collapse-3" aria-expanded="true" aria-controls="collapse-3">
                                Collapsible #3
                            </button>
                        </h5>
                    </div>

                    <div id="collapse-3" class="collapse" aria-labelledby="heading-3" data-parent="#accordion-3">
                        <div class="card-body">
                            Content for collapsible #3 goes here
                        </div>
                    </div>
                </div>
    </div>
    <div class="row">
        <div id="accordion-4" class="col">
                    <div class="card-header" id="heading-4">
                        <h5 class="mb-0">
                            <button class="btn btn-link" data-toggle="collapse" data-target="#collapse-4" aria-expanded="true" aria-controls="collapse-4">
                                Collapsible #4
                            </button>
                        </h5>
                    </div>

                    <div id="collapse-4" class="collapse" aria-labelledby="heading-4" data-parent="#accordion-4">
                        <div class="card-body">
                            Content for collapsible #4 goes here
                        </div>
                    </div>
                </div>
    </div>
</div>
<div class="card col-12 col-md-4">
    <div class="row">
        <div id="accordion-5" class="col">
                    <div class="card-header" id="heading-5">
                        <h5 class="mb-0">
                            <button class="btn btn-link" data-toggle="collapse" data-target="#collapse-5" aria-expanded="true" aria-controls="collapse-5">
                                Collapsible #5
                            </button>
                        </h5>
                    </div>

                    <div id="collapse-5" class="collapse" aria-labelledby="heading-5" data-parent="#accordion-5">
                        <div class="card-body">
                            Content for collapsible #5 goes here
                        </div>
                    </div>
                </div>
    </div>
    <div class="row">
        
    </div>
</div>

</div>

Answer №3

It's generally not advisable to mix your layout components with your content components. Keep them separate for better organization:

<div class="col-12 col-md-4">
  <div class="card">

Check out the Demo here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to establish communication with server. Facing issues in connecting AngularJS with NodeJS

I am currently working on establishing a communication process between my server and client to receive either a "success" or "failure" response. The server is being developed using node.js with the express framework, while the client is built using angular ...

javascripthtmlangularjsnode.jsweb-development-server

Is it possible to fulfill a promise within an if statement?

I'm fairly new to using promises in JavaScript, and I am currently facing an issue where a function needs to execute before running some additional code in another function. The problem arises when the promised function includes an if statement that l ...

javascriptnode.jspixi.js

An error in TypeScript has occurred, stating that the type 'IterableIterator<any>' is neither an array type nor a string type

Hey there! I'm currently working on an Angular project and encountering an error in my VS Code. I'm a bit stuck on how to fix it. Type 'IterableIterator<any>' is not an array type or a string type. Use compiler option '- ...

javascripttypescript

Leveraging NodeJS to handle server-side tasks and operations

Background: I am exploring the use of NodeJS for a project that involves scraping and storing content in Mongo. This process needs to be automated according to a set schedule. In addition, I need functions that can extract items from the Mongo database, o ...

javascriptnode.jsexpressweb-scrapingserver-side

Vite.js, specifically in conjunction with Vue.js, experiences an issue with undesired page reloads, but this

Encountering an unusual issue with Vite.js specifically on Samsung Internet while using the development server... The problem at hand involves a continuous automatic page reload every 3 seconds, without any intentional intervals being set or written. This ...

javascriptvue.jsvite

Is it possible to include additional transformations to a div element?

Is it possible to add additional rotation to a div that already has a transform applied? For example, can I do the following: <div style="width: 200px; height: 200px; background-color: red; transform: rotateX(90deg) rotateY(10deg)" id="myDiv">< ...

javascriptjqueryhtmlcsstransform

The React component using createPortal and having its state managed by its parent will remain static and not refresh upon state modifications

I am facing a problem that can be seen in this live example: https://stackblitz.com/edit/stackblitz-starters-qcvjsz?file=src%2FApp.tsx The issue arises when I pass a list of options to a radio button list, along with the state and setter to a child compon ...

javascriptreactjstypescript

Is there a way to show an element on a website only when the height of the HTML content exceeds the height of the viewport?

My webpage serves as a dynamic to-do list, allowing users to add an endless number of tasks of all types. As the list grows in size, the page height increases and a scrollbar appears. Positioned at the bottom right corner of the page is a fixed button that ...

javascripthtmlcssheightviewport

Using spin.js instead of an animated gif provides a sleek and modern alternative for adding loading

Seeking guidance as a newcomer to JQuery. A form "processing" div should appear after form submission. Currently, using a basic div with an animated gif for visual feedback: <div id="loading">Please wait, your news is being submitted... <img src= ...

javascriptjquery

Accessing data in form rules with Vuetify: tips and tricks

Is it possible to access a data element within a rule? Click here to see my code in action I'm attempting to change the value of a data element on a text field rule within a Vuetify form. While the rule itself is functioning properly, I'm enco ...

javascriptvue.jsvuejs2vue-componentvuetify.js

What specific flag should be included in Chrome settings to prevent displaying c:/fakepath?

Is there a way to disable this security feature? I'm seeking a solution in Chrome to obtain the full file path of an uploaded or viewed file, similar to how it can be done in Internet Explorer. Despite my efforts with flags like --allow-file-access-f ...

javascriptjqueryhtmlgoogle-chromefile-upload

Perform simple arithmetic operations between a number and a string using Angular within an HTML context

I'm stuck trying to find a straightforward solution to this problem. The array of objects I have contains two values: team.seed: number, team.placement: string In the team.placement, there are simple strings like 7 to indicate 7th place or something ...

javascripthtmlangular

I'm struggling to retrieve and display data from my Flask application using console log. It seems to be a challenge when combining it with

I am encountering an issue while attempting to load data into my Flask page and log it in the console. The error I keep receiving is shown below: VM165:1 Uncaught ReferenceError: data is not defined at <anonymous>:1:13 Below are snippets of cod ...

pythonhtmlflask

Gather all dropdown items using WebdriverIO and store them in an array

Within my application, there is a dropdown that resembles the following - <select> <option value="1">Volvo</option> <option value="2">Saab</option> <option value="3">Mercedes</option> <option value="4"& ...

javascriptnode.jsseleniumwebdriver-io

Struggling with getting the Bootstrap Carousel to switch between slides?

I'm facing a challenge in creating a functioning carousel with Bootstrap. I've utilized a template for this purpose, but the issue lies in the slides not transitioning correctly when I click the arrow buttons to move to the next or previous slide ...

htmlbootstrap-4bootstrap-5

Issue with React component not receiving dataThe values are not being

Currently, I am a beginner in using React and as part of my training, I have embarked on a project to create a simple book ranking system. In this project, the user enters the title of the book they would like to vote for. If the input field is left empty, ...

javascriptreactjsreact-proptypes

What is the best way to retrieve location data in a React application?

In my React project, I am trying to retrieve location information using the Geolocation API. To accomplish this task, I have included a button in the code below: import React, { Component } from 'react' class App extends Component { construc ...

javascriptreactjs

Node js Express js token authentication: unraveling the implementation complexities

After extensive research on authentication methods for nodejs and express js, I find myself at a crossroads. So far, the most helpful tutorial I've found on sessions is this one. I am working with the mean stack and my main goal is to provide users ...

javascriptangularjsnode.jsgit

Transferring a large volume of JSON objects to a database using API post requests

Currently, I'm faced with the challenge of sending a large amount of JSON objects to a database through API post calls. However, upon attempting to send all these objects individually, I encounter numerous HTTP errors, predominantly 400 errors. My in ...

javascriptjsonnode.jsapiamazon-dynamodb

I need help figuring out how to handle click events when using VueJS 2.0 in conjunction with a vue-mdl menu component

While @click doesn't seem to respond, v-bind:click does register. However, I'm facing the challenge of not being able to access the mdl-menu or mdl-menu-item components in order to add the method. The goal is to implement something like @click=" ...

javascriptvue.jsvue-component