I will show you how to customize the background color and width of collapsed elements within an accordion using Bootstrap 4.5

          <link rel="stylesheet" 
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
    integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" 
crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
    integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
    crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e4948b94948196ca8e97a4d5cad5d2cad4">[email protected]</a>/dist/umd/popper.min.js"
    integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
    crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
    integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
    crossorigin="anonymous"></script>



<div class="card">
        <div class="card-header" id="headingOne">
          <h5 class="mb-0">
            <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria- 
controls="collapseOne">
                            Collapsible Group Item #1
                        </button>
          </h5>
        </div>

        <div id="collapseOne" class="collapse show text-center" aria-labelledby="headingOne" 
 style="width:300px; background-color: yellow; margin:auto;">
          <div class="card-body">
            <div class="card">
              <div class="card-header text-center" id="headingTwo" >
                <h5 class="mb-0">
                  <button class="btn btn-link collapsed text-center" data- toggle="collapse" data- 
 target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" style="width:300px;">
                                        Collapsible Group Item #2
                                    </button>
                </h5>
              </div>
              <div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo">
                <div class="card-body">
                  Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus wolf moon 
officia aute, non cupidatat skateboard dolor brunch. Food eiusmod. Brunch 3 wolf moon tempor, sunt 
aliqua put a bird on it assumenda shoreditch et. Nihil anim keffiyeh helvetica,
                  craft beer sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings 
farm-to-table, raw denim aesthetic synth nesciunt you probably labore sustainable VHS.
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

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

Unsure how to incorporate the bootstrap links in snippet but as seen, collapse two is nested within collapse one. If possible, when I expand collapse one, I would like the yellow background to extend to the same width as collapse one. Thank you for any assistance!

htmlcssbootstrap-4

Answer №1

Snippet of HTML code: 

<html lang="en">
  <head>
    <title>Title</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  </head>
  <body>
    <div class="card">
        <div class="card-header" id="headingOne">
          <h5 class="mb-0">
            <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                Collapsible Group Item #1
            </button>
          </h5>
        </div>

        <div id="collapseOne" class="collapse show text-center" aria-labelledby="headingOne" style="background-color: yellow;">
          <div class="card-body mx-auto" style="width:300px; ">
            <div class="card ">
              <div class="card-header text-center" id="headingTwo" >
                <h5 class="mb-0">
                  <button class="btn btn-link collapsed text-center" data-toggle="collapse" data- target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" style="width:300px;">
                      Collapsible Group Item #2
                  </button>
                </h5>
              </div>
              <div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo">
                <div class="card-body">
                  Content for collapsible item 2.
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="card">
        <div class="card-header" id="headingThree">
          <h5 class="mb-0">
            <button class="btn btn-link collapsed" data-toggle="collapse" data- target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                Collapsible Group Item #3
            </button>
          </h5>
        </div>
        <div id="collapseThree" class="collapse" aria-labelledby="headingThree">
          <div class="card-body">
            Content for collapsible item 3.
          </div>
        </div>
      </div>
    </div>
    
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

Live demo available at: https://jsfiddle.net/v0q3pxsh/

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

The display of prime numbers is not functioning in this JavaScript code

I've been diving into JavaScript lately and I'm currently working on displaying prime numbers. However, I'm encountering an issue where the output is not showing up. Can someone lend a hand? I seem to be stuck. Here is my initial code snipp ...

javascriptphphtml

Can you show me the steps for downloading the WebPage component?

My goal is to save webpages offline for future use, but when I download them as html many of the included components disappear! I attempted opening them in a WebBrowser and downloading as html with no success. One potential solution is to download the ht ...

javascripthtmlvb.netdomwebclient

Is there a way to emphasize my navigation using a call-to-action (CTA)?

My CTA is set up like this: <div class="heading__link"> <a class="heading__cta" href="#about">View my work</a> </div> Additionally, my navigation bar is structured like this: <nav id=&quo ...

javascripthtmlcss

Tips for showcasing mistakes when submitting a form

I am curious about how to show the error message from my model in the validate() function if the submit is not valid, returning "invalid username or password" index.scala.html @(myForm: Form[models.profile.MUser]) @import helper._ @import helper.twitter ...

htmlformsvalidationscalaplayframework-2.0

Tips on incorporating FORM elements with tables and ensuring that data submitted through $_POST method is successfully posted

Recently, I have been encountering an issue with a simple FORM on my website. Whenever I press the SUBMIT button, nothing happens - the form seems to activate but no $_POST variables are being received. echo "<hr>1aa<br />\n"; ...

phphtmlformshttp-post

Is it possible to align divs so that they touch when they wrap to a new line, creating a grid-like appearance?

My React board component consists of an array of divs that I want to arrange in a grid-like map. The issue is, when the div wraps to a new line, there is significant space between each row. I aim to have the divs close together with no gaps. GameMap state ...

javascriptcssreactjsflexbox

IE9 does not properly display SVGs used as background images

Utilizing SVG files as backgrounds for my HTML elements has been successful in most major browsers. However, an issue arises when trying to ensure compatibility with Internet Explorer 9. The problem lies within IE9's rendering of the SVG backgrounds, ...

htmlcsssvginternet-explorer-9background-image

How do you prevent overlapping divs from being clickable in order to access content below?

Currently, I am utilizing a JPG overlay with decreased opacity for a particular effect. However, I am interested in keeping it solely as an aesthetic effect and making the content beneath that division clickable. Do you think this is achievable? Thanks! I ...

javascriptjquerycssevent-listener

Ways to utilize a single HTML page for various URLs while changing one variable value based on the queried URL

My current HTML page structure looks like this: <body ng-controller="DashboardDisplay" onload="submit()"> <div class="container-fluid" > {{scope.arr}} </div> </body> <script> var myApp = angular.module(&apos ...

javascripthtmlcssangularjsnode.js

How can I establish the conversion from pixels to em units?

According to a source I found, 1 em is equivalent to 16px. You can read more about it here. Despite setting the font-size to 100% in the body and using font-size: 1em, the standard font size in my Jekyll site remains 12px. Curious? Visit my Jekyll site a ...

htmlcssjekyll

AJAX: Bringing in new content to display beneath the triggering page

Here is the code for my main page: <head> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <style type="text/css"> div { width:100%; ...

javascriptjqueryhtmlcssajax

Inspect Element - base tag href URL for inline CSS allocation

When utilizing the <base> tag in HTML along with the <style> tag on Microsoft's Edge Browser, I encounter a peculiar issue. Here is a very basic example: <!DOCTYPE html> <html lang="en"> <head> <title>Edge de ...

htmlcssmicrosoft-edgedeveloper-tools

What is the most effective method for updating a website from Bootstrap version 4.0.0 to the most recent 4.3.1 release

Looking for guidance on how to update a Bootstrap 4 html/css website from version 4.0.0 to the current version (currently 4.3.1). I've searched online but can only find instructions for upgrading from version 3.x.x to 4.x.x. Can anyone provide me with ...

twitter-bootstrap-3bootstrap-4upgrade

What is the method for importing .scss files throughout a Next.js application?

I'm looking to transform my React app into a Next.js app. In the current React setup, I have .scss CSS files being imported in various components. However, once I transfer the code to a Next.js environment, I encounter an error: Global CSS cannot be ...

cssreactjsnext.jssass

Is it possible to apply a specific CSS color to a row in Angular 9 mat-tables without having to individually set it in multiple locations?

I am working on a mat-table in Angular 9 where I need to implement a function that determines the CSS class for each row... getRowClass(item: Item): string { let class_ = ""; if (...condition1...) { ... } else { class_ ...

cssangularangular9mat-table

What is the best way to adjust the column layout in Bootstrap 4 according to the Odd or Even children?

As a student from the Netherlands studying ICT, I am seeking assistance. I have successfully managed to change the column layout based on screen width but now I want to alter the layout for objects based on whether they are odd or even. My goal is to achi ...

wordpresslayoutbootstrap-4multiple-columns

Ways to assign a CSS class specifically for images

.calendarList { background-image: url('/resource3/hpsc/common/images/calendar.png'); background-position: 135px 50%; background-repeat: no-repeat; cursor:pointer; } <input type="text" id="toDatepicker" class="cal ...

javascriptjquerycss

Glitch in jQuery causing multiple instances of text being added to a textarea consecut

I created a response system where users can reply to comments by clicking on the reply button. Once clicked, it triggers a function that adds @user at the beginning of their comment: $('#inputField').focus(); $('#inputField').text(&apo ...

jqueryhtmltextareaappend

Switch images when hovering

I currently have two dropdown menus called NEW and SHOP. When I hover over the New Menu 1, it should display the corresponding image. Similarly, when hovering over New Menu 2, the related image should be shown in a div with the ".menu-viewer" class. Whil ...

jquerycss

How can I combine addClass with fadeIn/fadeOut in JavaScript?

Can the addClass and fadeIn functions be combined in JS? Although I'm not very experienced with JS, I'm working on a script where the div container changes background color by fading in and out on text hover. I've created a CodePen to demo ...

javascriptjquerycssanimation