Tips for customizing the appearance of a collapsed Bootstrap 4 Accordion heading

Is there a way to customize the styling of a Bootstrap 4 accordion so that the header changes color when opened and closed? Which classes should be targeted in order to achieve this effect, such as making the heading red when the accordion is open and gray when it's closed?

Here is the code snippet:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity= "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div id="accordion">
  <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" aria-labelledby="headingOne" data-parent="#accordion">
      <div class="card-body">
         <!-- Content Goes Here -->
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </button>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
      <div class="card-body">
        <!-- Content Goes Here -->
      </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" data-parent="#accordion">
      <div class="card-body">
       <!-- Content Goes Here --> 
      </div>
    </div>
  </div>
</div>

Thank you for your help!

csstwitter-bootstrapbootstrap-4

Answer №1

To simplify the process, consider using the card-header as the control element instead of the btn. You can then utilize CSS to alter the colors....

.card-header.collapsed {
    background:#ccc;
}
.card-header:not(.collapsed) {
    background:#ee6666;
}


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

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
      <div class="card-body">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sodales nisi id gravida facilisis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin consequat velit eget sapien convallis rutrum.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header collapsed" id="headingTwo" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
      <h5 class="mb-0 " >
        <button class="btn btn-link">
          Collapsible Group Item #2
        </button>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
      <div class="card-body">
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header collapsed" id="headingThree" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
      <h5 class="mb-0">
        <button class="btn btn-link">
          Collapsible Group Item #3
        </button>
      </h5>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
      <div class="card-body">
        Phasellus accumsan porta turpis at sodales. Integer ut libero sed odio volutpat cursus a quis magna. Praesent semper risus nec nunc imperdiet, non venenatis ex fermentum. Vivamus congue ipsum ac lobortis finibus. 
      </div>
    </div>
  </div>
</div>

Answer №2

This method is both simple and clever for achieving the desired result.

To implement this, utilize CSS by removing any color classes from your HTML button.

Add the following HTML attribute to your collapse button: aria-expanded="false"

Next, include the following CSS code:

<style>
#collapseBtn[aria-expanded="true"] {background-color:green;color:black}
#collapseBtn[aria-expanded="false"] {background-color:gray;color:black}
</style>

Your Bootstrap button should be structured like this:

<a aria-expanded="false" id="collapseBtn" href="#btn" class="btn btn-block"   data-toggle="collapse">Collapsed button</a>

Answer №3

To create a collapsible style, you need to specify an id in the button where the collapse header is located. Then, you can utilize Bootstrap Collapse Events to modify the classes of that collapse header.

In order to change the color of the bootstrap header, I added the class text-secondary. During the show.bs.collapse event, I used the addClass function to apply the text-danger class for red text color.

This modification was applied to the First collapse example. You can adapt it according to your specific needs.

Please refer to this code snippet:

$('#collapseOne').on('show.bs.collapse', function () {
        $("#collapseOneButton").removeClass("text-secondary");
        $("#collapseOneButton").addClass("text-danger");
})
 
$('#collapseOne').on('hide.bs.collapse', function () {
        $("#collapseOneButton").addClass("text-secondary");
        $("#collapseOneButton").removeClass("text-danger");
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

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

    <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
      <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 class="card">
    <div class="card-header" id="headingTwo">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" id="collapseTwoButton" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </button>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
      <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 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" data-parent="#accordion">
      <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>

I trust this response will be beneficial to you.

Answer №4

After thorough testing, I have successfully created this code. Feel free to use the complete code snippet below, which includes both jQuery and CSS. If you encounter any issues, please don't hesitate to inform me through comments.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>
<div id="accordion">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link active" 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" aria-labelledby="headingOne" data-parent="#accordion">
      <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 class="card">
    <div class="card-header" id="headingTwo">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Collapsible Group Item #2 </button>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
      <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 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" data-parent="#accordion">
      <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>
<script type="text/javascript">
jQuery(document).ready(function(){
    jQuery('.card .btn-link').click(function(){
        jQuery(".card .btn-link.active").removeClass("active");
        jQuery(this).addClass("active");
    });
});
</script>
<style type="text/css">
.active{color:#c00; }
.active.collapsed{color:#666; }
</style>
</body>
</html>

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

Spinning an SVG path with CSS3 in a circular motion from its central axis

I have a collection of SVG paths, and one of them is displayed below: <path id="GOL" class="st0" d="M37.5,430.5l-12.4-12.4v-13.3h-4.2c-7.2,0-13.9,2.5-18.7,7.5c-4.7,4.9-7.3,11.3-7.3,18.3 c0,7,2.6,13.5,7.3,18.3c4.8,5,11.4,7.6,18.6,7.6l4.2,0v-13.7L36. ...

htmlcsssvgcss-animations

Tips for smoothly switching from one SVG image to another

I am looking for a way to smoothly transition between two SVG images that are set as background images in a div. I am specifically interested in using CSS 3 transitions for this effect, but I am open to other solutions as well. Can you help me achieve th ...

javascripthtmlcsssvg

Tips for loading all background images simultaneously

I just created my first website page with a few background images that crossfade. However, I am experiencing an issue where the next background image takes some time to load during the crossfading effect if the page is not cached on the user's comput ...

htmlcssbackground-image

Fixed Element Transitioning from Starting Position on Scroll

Check out the JSFiddle example here I'm currently working on a website utilizing Bootstrap 3. I have an image that sticks to the page when scrolling by changing its position to fixed. While this functionality works, the image tends to shift slightly ...

javascriptjqueryhtmlcsstwitter-bootstrap

Hide the mobile menu after an option is clicked

I managed to implement a mobile menu on my single-page website by utilizing code I found online. Currently, the menu only opens or closes when the main navigation bar is selected due to the JavaScript I have integrated. Is it feasible for the menu to autom ...

javascriptjqueryhtmlcssmenu

When attempting to click on my subtopics using jQuery, they do not appear as expected

$(document).ready(function () { $("#subTopics").hide(); $("#mainTopics").click(function () { $("#subTopics").show("slow"); }); }); body { margin: 0; } li, a{ text-decoration: none; list-style-type: none; text-d ...

javascriptjqueryhtmlcss

Oops! Looks like we've encountered an issue: the variable "$alert-padding-y" has not been

I am currently running ruby version 2.4.1 and rails version 5.2.2. My goal is to integrate bootstrap 4 into my existing project. To achieve this, I have removed all the CSS and JS files from assets and solely imported bootstrap in my application.scss file. ...

ruby-on-railsbootstrap-4ruby-on-rails-5

Carousel King with never-ending content

Is there a way to create a carousel in Bootstrap 4 where the carousel items are not separated but visible concurrently? In other words, can carousel item 2 and 3 appear while the first item is still visible? I've included an image for reference: http ...

twitter-bootstrapbootstrap-4

Align the body of the table with the header after populating the table with values

Issue : The data in the table body is misaligned with the headers of each column. Solution : var test_insert1 = '<tr>' + '<td class="td-trad-9">762261</td>' + '<td class="td-trad-7">1.16176&l ...

javascripthtmlcsshtml-tablecss-tables

What is the best way to align line items containing both text and images vertically on a page?

I'm struggling with aligning the text vertically in my menu items which are created using ul and li tags. The default _layout.cshtml page is being used, but the text is aligned at the top instead of the middle. I attempted to use the vertical-align a ...

asp.net-corebootstrap-4html-listsvertical-alignment

The background image item in C# Outlook Mail does not repeat as expected when used inline

Hey there, I need to set up an email campaign with data in the mail body and a background image. However, I'm running into issues with the background image repeating. When I try to prevent repetition using background-repeat: no-repeat;, the image does ...

c#htmlcssoutlook

Tips for Enhancing the Appearance of a List Input Box

While on my hunt for an auto-completing text field, I stumbled across lists. <label>Bad Habit <input list="badhabits" id="habits" name="habit"/> </label> <datalist id="badhabits"> <option value="alcoholics"> <option ...

htmlcssinputdrop-down-menutextbox

Tips for positioning buttons in the bottom corner of a webpage while ensuring they are responsive

Currently working on this website as a personal side project, focusing on making it responsive. This is my first attempt at creating a responsive webpage, and I have successfully figured out most aspects except for the positioning of the social media butto ...

htmlcsstwitter-bootstrapbootstrap-4

"Creating a distinctive CSS style for underlining titles without including the actual

Although I've searched on SO, I still haven't found a satisfactory solution to my question. So here's the issue: I want to underline an h3 tag with 100% width EXCEPT for the actual text part. It should look like this: My super title ...

htmlcss

Undesirable gap found within the bootstrap columns

I'm experiencing issues with the design of my form controls in Bootstrap. I have divided the screen into three columns, with each column being 4 md wide. The General Agreement control is defined as col-md-8 to span across. I'm unsure why there is ...

asp.net-mvchtmlcsstwitter-bootstrap-3

Internet Explorer reveals hotspots

Is there a way to hide the polygonal hotspots in Internet Explorer when using a picture with them? I want to prevent them from being visible. Thank you! To see an example, visit this link in IE and select one: ...

htmlcssinternet-explorer

Adjusting the placement of Bootstrap popovers according to their horizontal position relative to the window's edge?

After extensive research across the vast expanse of the Internet, I stumbled upon this enlightening stackoverflow post Is it possible to change the position of Bootstrap popovers based on screen width?. However, my query remains unresolved, likely due to m ...

jquerytwitter-bootstrapoffsetpopover

What types of HTML are compatible with SweetAlert?

I am exploring the HTML elements that can be used with the SweetAlert alert function (). It seems that headings like h1, h2, etc. and strong tags are allowed, but when I tried to add inline styles like style="color:blue;", the alert stopped working. The v ...

javascriptjqueryhtmlcsssweetalert

Learning SQL and PHP is essential for displaying data from a database in a dynamic table on a web page. In order to select specific columns from the database and arrange them in

I am working with a sql table called res that contains various rows and columns. Here is an example of the data: Sno RegNo Name sub1 sub2 sub3 total percent result color 1 1DU12CS100 s1 10 10 10 30 50 fail danger 2 ...

phphtmlmysqltwitter-bootstrap

The positioning of the button was off-kilter in Firefox

app.component.html: <div class="input-group col-12 d-flex align-items-baseline pb-3"> <p class="mb-0 pb-3 col-12">Verify....</p> <input type="url" class="form-control" id="validationC ...

angularbootstrap-4