Eliminating the boundaries of Bootstrap accordion

I'm currently working on creating Bootstrap accordion menus and I'm attempting to remove the border that appears when it's collapsed and expanded. Below is the code I've been working on:

<div class="accordion">
  <div class="accordion-item">
      <button style="font-weight: bold; background-color: #f5f5f5;"class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                        Tester
       </button>
  <div id="collapseOne"class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
  <div class="accordion-body" style="background-color: #f5f5f5;">
      Placeholder text
  </div>
 .accordion-button:not(.collapsed) {
    color: black  !important;
    background-color: #f5f5f5 !important;
  }
.accordion-button:link, .accordion-button:visited, .accordion-button:hover, .accordion-button:active  {
    background-color: #f5f5f5 !important;
    color: black !important;
    text-decoration: none !important;
    border: hidden !important;
    border-color: #f5f5f5 !important;
    box-shadow: 0px !important;

  }
  
  .accordion-button:focus {
    z-index: 3;
    border-color: #f5f5f5 !important;
    outline: 0;
    box-shadow: 0 0 0 .25rem #f5f5f5 !important;
    background-color: #f5f5f5;
  }

  .accordion-body {
    border-bottom: none !important;
  }

https://i.sstatic.net/tLgMO.png https://i.sstatic.net/w4SnK.png

Answer №1

Here is a helpful solution I found:

https://jsfiddle.net/y8va5j3L/

Your updated CSS:

    color: black !important;
    background-color: #f5f5f5 !important;
  }
.accordion-button:link, .accordion-button:visited, .accordion-button:hover, .accordion-button:active {
    background-color: #f5f5f5 !important;
    color: black !important;
    text-decoration: none !important;
    border: none;
    border-color: #f5f5f5 !important;
    box-shadow: 0px !important;

  }
  
  .accordion-button {
    border: none;
  }
  
  .accordion-button:focus {
    z-index: 3;
    border-color: #f5f5f5 !important;
    outline: 0;
    box-shadow: 0 0 0 .25rem #f5f5f5 !important;
    background-color: #f5f5f5;
  }

  .accordion-body {
    border-bottom: none !important;
  }


  [1]: https://jsfiddle.net/y8va5j3L/

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

"Resolving an inconsistency problem with the Vary header in Htaccess

Could someone help me identify the issues in my htaccess code? I'm encountering errors: This response is negotiated, but doesn't have an appropriate Vary header. The resource doesn't send Vary consistently. ## add vary header <IfModule ...

Tips for preventing DIV elements from overlapping

In the process of creating a CSS design for a SIM game I enjoy playing, a client requested four boxes: two large ones with two smaller ones aligned horizontally in between. Everything was going smoothly until I attempted to add headers to the boxes. The en ...

Is your website designed to adapt effortlessly to all screen sizes?

After uploading my web pages to a server, I've been testing them on various screen sizes and resolutions. Although everything looks good on larger screens, it's not scaling well on smaller resolutions like 800 x 600, 640 x 480, and 240 x 320. Cou ...

Inserting JQuery Selector from a .js file into a .php file at the beginning

Incorporated in my project is a jquery plugin for a slider, which includes the code snippet below for handling 'next and prev' buttons. $(selector).prepend('\ <ul class="mk-nav-controls">\ <li>& ...

Is it possible to enhance a form box with a border?

Having trouble adding a border to my bootstrap form box. I've tried applying border style properties but it doesn't seem to be working. Any suggestions? This is the class for the form box: <div class="form-box"> <div ...

Align text vertically next to an image

I am facing a challenge with aligning text vertically next to an image floated left. I have tried various solutions recommended on different platforms, but none seem to work for me. Despite following the suggestions provided in this particular solution, I ...

CSS: Continuous Automated Slide Transitions

What CSS code do I need to incorporate into my code to create a continuous Slider Animation? I want the pictures to slide automatically one by one, with a specified time interval between each slide when not on hover. The hover function is already included ...

Using CSS to leverage the power of both Grid and Flex simultaneously

Help Needed: CSS Challenge! I'm not a fan of CSS and can't seem to crack this code conundrum. Here's what I want the end result to look like: https://i.sstatic.net/z06qO.png Current Situation: #newOrderControl { border-style: solid ...

The MUI Grid design features information displayed on the left side, accompanied by an image placed directly to the right

In the React MUI V5 sample code below, I am creating a profile page layout with details of a person displayed on the left side of the page in label/value format. My question is how to position an "IMAGE" entry (assume it's a 300px x 300px profile ima ...

Interactive Sideways Navigation Bar

showcases a sleek horizontal scrolling menu on mobile devices. I aim to replicate this functionality for a website I'm redesigning that features extensive navigation elements. Key Features: Left and right scroll button options Centered list item op ...

The Bootstrap menu does not seem to be affecting the positioning of the body text

I recently came across an issue with a Bootstrap-based site I'm working on. When I click the hamburger menu on mobile view, the main content doesn't shift down to accommodate it, causing an overlap. Not ideal :-( Here's my Demo: https://js ...

When the search is focused, I prefer for the expanding search box to overlay the menu section rather than pushing it aside, all without the use

I am working on a search box with a subtle animation: <input class="search" type="search" placeholder="Search"> To make it expand when focused, I used the following CSS: .search:focus { width: 225px; outline: none; } I also experimented w ...

What is the best way to horizontally center an absolute button within a div?

I'm currently attempting to center an absolute button within a div at the bottom, but unfortunately it doesn't seem to be working as expected. Here is my current approach: .mc-item { background: #F0F0F0; border: 1px solid #DDD; height: 1 ...

Highlighted top and bottom borders accenting a vertical list

I am working on a list that contains four items. Each item should have top and bottom borders set to 1px solid grey by default. There is a JavaScript rotator in place that adds a 'highlighted' class to the selected list element, which should have ...

Discover the best method for transferring MySQL data between pages

Can anyone help guide me in the right direction on how to allow a user to click a link within a PHP While Loop generated MySQL table and pass that data to another page? I've searched through similar questions but haven't found a solution that fit ...

Having trouble with charts not appearing on your Django website?

I am working on a Django project where I need to integrate bar-charts using Django-nvd3. Although I have successfully displayed the bar-charts in separate projects, I am facing an issue with integrating them into my current project. Below is the code snipp ...

Arrangement of Columns in a Vertical Bootstrap Layout

When the xs layout displays as expected, how can I move the sidebar up to the navigation in order to eliminate the gap between them in the lg layout? <div class="row"> <div class="col-xs-12 col-lg-3 col-lg-push-9"> navigation & ...

What you see is what you get when it comes to effortlessly copying and pasting

As a web developer, I am aware that images cannot simply be copied from a local machine and pasted into a website - they must be uploaded. I have experience with wysiwyg tools like TinyMCE and FCKEditor, but my client is frustrated about not being able to ...

Determine the Height of the Container once the Font File has Finished Loading

When styling a website with a unique font using @font-face, the browser must download the font file before it can display the text correctly, similar to how it downloads CSS and JavaScript files. This poses an issue in Chrome (v16.0.912.63) and Safari (v5 ...

Elements being impacted by the CSS Transition are being pushed

I am facing a CSS issue that I just can't seem to resolve. If you visit and check out the top search bar. On hovering over it, you'll notice it resizes to fit the content width. This is the CSS code responsible for this: .header .search-wrap ...