What causes the empty gap between the accordion title and its content in Bootstrap?

I'm currently working on a Bootstrap accordion and I've encountered a problem where a white line appears underneath the heading whenever I click to expand it.

Here's the accordion

Here's my current code snippet: HTML - All divs do close properly, but there's more on this page.

I've attempted adjusting the padding and margins for all sections, but it hasn't resolved the issue for me.

#accordionMain{
    padding-top: 50px !important;
    padding-bottom: 200px !important;
}

#accordionHeading{
    background-color: #343A40 !important;
    font-size: 64px;
    padding: 10px;
    border-radius: 15px;
}

#accordionButton{
    color: #FAFAFE !important;
    background-color: #343A40 !important;
    font-size: 48px;
    font-weight: bolder;
}

#accordionBody {
    color: #FAFAFE !important;
    background-color: #343A40 !important;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

/* Buttons for FAQ acordion */
.accordion-button::after {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-circle' viewBox='0 0 16 16'><path d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/><path d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z'/></svg>");
}

.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-dash-circle' viewBox='0 0 16 16'><path d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/><path d='M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z'/></svg>");
}
<div id="accordionMain" class="row d-flex justify-content-center">
                <div class="accordion accordion-flush d-grid gap-4 pt-5 w-50 " id="FlushAccordion">
                    <div id="accordionItems" class="accordion-item">
                        <h2 class="accordion-header " id="accordionHeading">
                            <button id="accordionButton" class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
                                Question 1
                            </button>
                        </h2>
                        <div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="accordionHeading"
                            data-bs-parent="#FlushAccordion">
                            <div id="accordionBody"class="accordion-body">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolores est quasi ex! Ex deleniti consequuntur quisquam earum cupiditate quos ratione eum saepe, cum animi rerum optio repudiandae amet a explicabo?</div>
                        </div>
                    </div>

htmlcssbootstrap-5

Answer №1

By applying the border-radius: 15px; to #accordionHeading, you may notice a white space being generated. To resolve this, you can use jQuery to adjust the section as shown below:

  $("button").click(function(){
    if ( $('#accordionButton').attr('aria-expanded') == 'false' ) {
        $("#accordionHeading").css({"border-radius": "15px"});
    } else if ( $('#accordionButton').attr('aria-expanded') == 'true' ) {
        $("#accordionHeading").css({"border-radius": "15px 15px 0px 0px"});
    } 
  });
#accordionMain{
    padding-top: 50px !important;
    padding-bottom: 200px !important;
}

#accordionHeading{
    background-color: #343A40 !important;
    font-size: 64px;
    padding: 10px;
    border-radius: 15px;
}


#accordionButton{
    color: #FAFAFE !important;
    background-color: #343A40 !important;
    font-size: 48px;
    font-weight: bolder;
}

#accordionBody {
    color: #FAFAFE !important;
    background-color: #343A40 !important;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

/* Buttons for FAQ accordion */
.accordion-button::after {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-circle' viewBox='0 0 16 16'><path d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/><path d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z'/></svg>");
}

.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-dash-circle' viewBox='0 0 16 16'><path d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/><path d='M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z'/></svg>");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3d5f5252494e494f5c4d7d08130c130e">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="34565b5b40474046554474011a051a07">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div id="accordionMain" class="row d-flex justify-content-center">
                <div class="accordion accordion-flush d-grid gap-4 pt-5 w-50 " id="FlushAccordion">
                    <div id="accordionItems" class="accordion-item">
                        <h2 class="accordion-header " id="accordionHeading">
                            <button id="accordionButton" class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
                                Question 1
                            </button>
                        </h2>
                        <div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="accordionHeading"
                            data-bs-parent="#FlushAccordion">
                            <div id="accordionBody"class="accordion-body">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolores est quasi ex! Ex deleniti consequuntur quisquam earum cupiditate quos ratione eum saepe, cum animi rerum optio repudiandae amet a explicabo?</div>
                        </div>
                    </div>

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

Issue with navigational button layout

I am facing an issue while designing my navigation menu with 4 circular items spaced about 20 px apart on the top right of the screen. I have managed to style each nav item as a circle, but when I try to position them in the upper right corner, only the 4t ...

htmlcssnavigation

Ways to implement a custom scrollbar across an entire webpage:

I am trying to implement the Jquery custom content scroller on my webpage to replace the default scrollbar. However, I am facing difficulties in getting it to work properly. You can view my code on Codepen. Although the plugin works fine with smaller blo ...

javascriptjqueryhtmlscrollscrollbar

establishing a predetermined dimension using css and integrating it into javascript

I'm a beginner in CSS and JavaScript and I've been searching through various sources for an answer to my question without any luck. My goal is to pre-set the sizes of all sections using CSS and then utilize these sections in JavaScript. However, ...

javascriptcsssize

Guide to creating a scrollable container that occupies the remaining height of the screen

Looking to create a fixed container that is scrollable, while keeping the rest of the page fixed? Check out this Stackblitz example. Here's a component called "PageDefault" that includes a Header and wraps each page in the application (the content of ...

cssreactjssass

Delegate All Events to the Document

In my current setup, I have over 350 events that look like: $(document).on('click','.removable-init',function(){}); I've noticed a performance issue where some click events are delayed by a fraction of a second. This is happening ...

javascriptjqueryhtmlperformanceevents

Exploring the versatility of CSS variables in JavaFX

In need to style four buttons in a consistent way, but each one should have its own unique image. Three styles are required: one for normal state, and the others for hover and focused states. Using CSS for this task would involve a lot of repetition, as ...

cssjavafx

Updating Mysql data via a button on the homepage using the passed ID in the URL - a step-by-step guide

I have set up a Bootstrap modal popup for editing items on the home page. My goal now is to update the details of the selected item using PHP. In this case, I am passing the item id through the URL to select the item. After clicking the edit button, a po ...

phphtmljquerycssajax

Is there a way to format Persian words in a Left-to-Right direction?

When attempting to write Persian words in a left-to-right format for math formulas in a textarea using HTML and CSS, I am struggling to make it work with properties like direction:ltr;. I have tried various solutions but none have fixed the issue. I have ...

htmlcsstext-direction

The selection feature is not supported for the type of input element in jQuery

I'm currently attempting to utilize AJAX to send a form with jQuery. However, upon clicking the submit button (which is technically a link), I encountered an error. The error displayed in the console is as follows: Failed to read the 'selection ...

javascriptjqueryhtmlajax

What is the proper way to add comments within CSS code inline?

Can anyone provide instructions on how to comment an inline css property, such as height, in the following code snippet? <div style="width:100%; height:30%;"> Any help is appreciated. Thank you! ...

csscomments

Numerous options available in a dropdown menu

I have a Dropdown menu that offers various functions. "Update" option redirects to a page for updating information "Export Form" option redirects to a page for exporting the form Although the current code allows these actions, I am facing an issue with ...

javascriptphphtml

Modify just one of the padding axis while keeping the other constant by utilizing a media query

My div currently has the following padding set: padding: 14px 150px; I want to change the left/right padding without affecting the top/bottom padding using a media query. @media screen and (max-width: 700px){ #paddingDiv{ padding: same as ...

css

What are some ways to eliminate the excess white space beneath the footer in HTML?

After creating a responsive webpage that works flawlessly on mobile devices and tablets, I noticed a problem with the footer when viewed on desktop. There is an empty white space at the end of the webpage, and upon inspecting the browser, it focuses on the ...

htmlcsssass

Ways to format the direct descendant of a multi-level list?

Check out my nested ul list: <ul> <li> <a href="/"></a> </li> <li> <a href="/"> </a> &l ...

htmlcsssassscss-mixins

Ways to create a separator or divider between rows in a table

I'm currently working on creating a table layout and I want to include dividers similar to those seen on this website. Specifically, I am looking to have thin grey dividers between rows. I've attempted the following code, but it doesn't seem ...

htmlcss

Customize bullet list icons to adjust in size based on content using css

In my CMS project, the CMS team has a special requirement regarding unordered and ordered lists. They want the size of the bullet list icon to adjust according to the text content within the list. The image below shows the default design of a list item: ...

javascriptjqueryhtmlcss

Using Django to render multiple images for a post

For the past few days, I have been attempting to provide the admin user with the ability to upload multiple images/slides for each individual post. One idea that came to mind was nesting a for loop inside the posts' for loop so that for every post, al ...

htmldjangodjango-modelsrendering

Is it possible to use only CSS to crop an image into a square and then shape it into

I am attempting to create a circular shape out of images that have varying sizes and shapes (some rectangular, some square, some portrait, and some landscape). When I apply either clip-path: circle(50% at 50% 50%); or border-radius: 50%;, the image transf ...

htmlcssimage

How can I prevent opening duplicate tabs of the same website simultaneously?

Is there a way to prevent users from accessing the same website page from multiple tabs? Could this be accomplished using JavaScript? ...

javascriptphphtml

Create a CSS popup alert that appears when a button is clicked, rather than using

Is there a way to customize CSS so that the popup alert focuses on a button instead of just appearing like this? https://i.sstatic.net/r25fd.jpg I have implemented this type of validation for a text box: <div class="form-group"> <label class="co ...

javascriptjqueryhtmlcss