Expanding a bootstrap accordion not only increases its own height, but also affects the adjacent one

I am facing an issue with my FAQ page where I have used bootstrap accordion tabs. The problem arises when I place them side by side in a 50/50 split, as when one tab is opened, the adjacent tab also expands without displaying its content.

For example, this is a screenshot of the problem: https://i.sstatic.net/j9beq.png

Below is a snippet of my HTML code:

<div id="faqresult">
    <div class="col-md-12 animatedopen">
       <div class="vragen-wrapper">
         <div class="masonry-header">
          <h3 id="betalen">Betalen</h3>
         </div>
         <div class="masonry-vragen faqcontainer">
      
          <div class="card">
            <div class="card-header" id="heading1">
              <h5 class="mb-0">
                <button class=" collapsed FAQ-button" data-toggle="collapse" data-target="#collapse1" aria-expanded="false" aria-controls="collapse1">
                  Welke betalingstermijn hanteren jullie?
                  <i class="fas fa-chevron-down"></i>
                </button>
              </h5>
            </div>
            <div id="collapse1" class="collapse " aria-labelledby="heading1" data-parent="#accordion">
              <div class="card-body">
                <p>Bij een eerste bestelling dient er vooruit betaald te worden, hierna is eventueel betaling mogelijk op factuur.</p>
              </div>
            </div>
          </div>
          
          <div class="card">
            <div class="card-header" id="heading2">
              <h5 class="mb-0">
                <button class=" collapsed FAQ-button" data-toggle="collapse" data-target="#collapse2" aria-expanded="false" aria-controls="collapse2">
                  Op welke manieren kan ik betalen?
                  <i class="fas fa-chevron-down"></i>
                </button>
              </h5>
            </div>
            <div id="collapse2" class="collapse " aria-labelledby="heading2" data-parent="#accordion">
              <div class="card-body">
                <p>De eerste bestelling altijd vooraf, daarna eventueel betaling mogelijk op factuur. Bij een eerste bestelling of betaling vooraf wordt een inschatting gemaakt van de verzendkosten. Deze zullen op basis van nacalculatie nogmaals berekend worden. Voor het verschil in kosten kan eventueel nog een aanvullende factuur volgen.</p>
              </div>
            </div>
          </div>
          
          <div class="card">
            <div class="card-header" id="heading3">
              <h5 class="mb-0">
                <button class=" collapsed FAQ-button" data-toggle="collapse" data-target="#collapse3" aria-expanded="false" aria-controls="collapse3">
                  Wanneer ontvang ik mijn factuur?
                  <i class="fas fa-chevron-down"></i>
                </button>
              </h5>
            </div>
            <div id="collapse3" class="collapse " aria-labelledby="heading3" data-parent="#accordion">
              <div class="card-body">
                <p>De factuur ontvang je na levering</p>
              </div>
            </div>
          </div>
          
         </div>
       </div>
    </div>
</div>

It seems that the issue of adjacent accordions expanding when one is opened might be related to how I have split them. I tried using the following CSS to arrange them in a 50/50 split:

#faqresult{
  width:100%;
}

.faqcontainer{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.faqcontainer .card{
  flex: 0 0 49.5%;
}

After applying some modifications as suggested below, the first accordion works fine:

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

However, the issue persists with the second accordion:

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

Answer №1

For the perfect solution, set <code>align-items: flex-start;
on your .faqcontainer.

When using flex-start, the cross-start margin edge of the items aligns with the cross-start line.

align-items typically defaults to stretch:

stretch (default): The items stretch to fill the container while still adhering to min-width and max-width constraints.

UPGRADE

Consider organizing your structure like this:

.container
  .column_container
    .card
    .card
  .column_container
    .card
    .card

Apply the following CSS:

#faqresult{
  width:100%;
}

.faqcontainer{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  align-content: flex-start;
  flex-direction: row;
}
.faqcontainer .column_container{
  width: 49.5%;
}
.faqcontainer .column_container .card{
  width: 100%;
}

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

When using a custom selection color to highlight underlined text, the underline becomes invisible

I am currently working on a website where I want to customize the text selection color. ::selection { background-color:#00ffff; } However, there seems to be an issue in this specific situation: p::after { content:"Try selecting the above elemen ...

The justify-content property aligns single-line text horizontally, but its alignment may not be consistent when the text expands over

Seeking a deeper understanding of flexbox alignment, I decided to experiment with aligning content using only flexbox properties. One puzzling observation is how "justify-content" centers items with single lines of text (flex-item-1 and flex-item-5), but n ...

Can using Gulp 4 to import or bundle Bootstrap 5 or Popper.js create a LICENSE.js file?

I am currently working on a project using Gulp 4 and Webpack 5 with Bootstrap 5. During the script bundling process, I have noticed that Gulp generates a bundle.js file as expected, but it also creates a bundle.js.LICENSE.js file. After examining my build ...

Is file timestamp utilized by Apache to verify if a resource has been changed?

Currently, I am working on an HTML page that references a large JavaScript file (1MB+) that is rarely updated. According to this source, the JavaScript file will not be resent if it hasn't been modified. I'm curious about how Apache determines i ...

Is there a way to convert a URL into a clickable link and retrieve the YouTube code embedded within

I have retrieved a string from the database using PHP and I want to echo it. Within this string, there is a YouTube link that I would like to make clickable, as well as extract the YouTube code at the end of the link. How can I achieve this? For example: ...

I possess a compilation of URL links and I am seeking to identify the specific HTML div that corresponds to each URL within a webpage

Could you please help me figure out which HTML div each URL belongs to on a webpage using Java? I have a list of URLs that need to be matched with their respective HTML divs. ...

The Tailwind preset is generating CSS code, but the webpage is not displaying the intended styles

Can anyone explain why the preset is generating CSS in the output file, but the styles are not displaying in the browser? When I manually write CSS in newstyle.css, it gets outputted to output.css and renders correctly in the browser. I attempted adding t ...

I'm new to React and curious - why do we need to use ReactDOM.render() to update HTML instead of just writing the HTML directly?

I am new to learning react and am struggling to grasp why we need to utilize reactDOM.render() instead of just writing plain HTML code. ...

What methods can be used to restrict users from navigating to the previous or next page while they are scrolling horizontally within a scrollable div?

Experiencing a frustrating UX issue that arises from using a wide table within a scrollable div on a webpage. The problem occurs when users scroll horizontally using a trackpad on a mac, they sometimes unintentionally trigger the "go to next/last page" fe ...

Trigger a function when the browser automatically populates an input field

I am attempting to trigger a function that can detect if the browser has autofilled a field and then add a specific class to it. After finding a thread with a solution that mostly works, mentioned here: Here is how I implemented it: $.fn.allchange = fun ...

The sequence of divs in a language that reads from right to left

Is there a way in HTML to designate a set of divs so that they automatically align from left to right for languages that read left to right, and alternatively, flow from right to left for languages that read right to left? This means that the direction of ...

Transforming the playbackRate property of a web audio-enabled audio element

I recently experimented with integrating an audio element into the web audio API using createMediaElementSource and achieved success. However, I encountered an issue when attempting to change the playback rate of the audio tag. Despite trying multiple appr ...

Get the Label Values Based on CheckBox Status

Is there a way to retrieve the values of labels corresponding to checkboxes in HTML? I have multiple labels and checkboxes next to each other, and I want to be able to get the label values if the checkbox is checked. Can you provide guidance on how to do ...

Using Flask to extract data from HTML pages

Simple inquiry: I am using Flask and I need to extract the string value from this array. I am familiar with utilizing request.form["name"], but I am unsure of how to give this variable a name. How can I retrieve this variable in order to display it on my s ...

Create a regular expression that permits a sequence of numbers (either integer or decimal) arranged in groups of up to five, with each

Is it possible to create a regular expression that allows integers and decimals? var reg = /^((\s*)|([0-9]\d{0,9}(\.\d{1,3})?%?$))$/.; How can users input 0 to 5 groups of integers and decimals separated by |? Updated: This regex sh ...

Link the parameters of two polymer elements within a repeat template

In this scenario, my goal is to securely bind attr and attr1. These two variables should be independent from the variable data, unlike other attributes in use. I want each iteration to have its own set of bound components, rather than sharing one data obje ...

Providing an HTML application even in the absence of an internet connection

I am currently developing an application that needs to function offline. I have experimented with the HTML5 manifest feature, which is now considered deprecated, and have also explored using 'Service Workers'. However, my challenge is that the ap ...

Use jQuery to parse the JSON below and then showcase the information in an HTML table

Can anyone assist me with parsing the following JSON using jQuery and presenting it in an HTML table? I want to showcase the values of "key" and "doc_count" in an HTML table. Your help would be greatly appreciated. Please find the JSON data below: { ...

Updates made to the Transform property in Mui Theme are not appearing in the browser

I'm looking to modify the MuiInputLabel.outlined. While I can see various changes when inspecting in the browser, I'm having trouble seeing the transform property change specifically. This is the current configuration of my MuiInputLabel: MuiInp ...

How do I modify the date format displayed in the Bootstrap 4 datetimepicker when sending the value?

I have a datetimepicker() set with ID start_date that matches an input name. In the props, the format is specified as YYYY-MM-DD. I want to use this format for my API, but I want the user to see the date displayed in the format DD-MM-YYYY. $('#start_ ...