Customizing CSS to differentiate the color of active card headers in a Bootstrap accordion

I currently have a basic bootstrap accordion set up, as shown below.

My goal is to style the .card-header element of only the expanded .card section without impacting the other .card-header elements.

Is there a way to specifically target the expanded item?

<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">
        Your content here...
      </div>
    </div>
  </div>

  <!-- Repeat card elements as needed with different IDs and content -->

</div>

Answer №1

const btnList = document.getElementsByClassName("btn-link");
for (i = 0; i < btnList.length; ++i) {
  btnList[i].addEventListener("click", function(e) {
    var currentElem = $(this).parent().parent();
    var button = $(this);
    $(".card-header").each(function() {
      if (currentElem[0] === $(this)[0]) {
        if (button.attr('aria-expanded') == 'false')
          currentElem.addClass('backColor');
        else
          currentElem.removeClass('backColor');
      } else
        $(this).removeClass('backColor');
    });
  });
};
.backColor {
  background: red !important;
  color: white !important;
}
<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 backColor" 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">
        Unique content for collapsible group item 1
      </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">
        Unique content for collapsible group item 2
      </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">
        Unique content for collapsible group item 3
      </div>
    </div>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer №2

In CSS, there is no direct way to select previous siblings. You will need to loop through all the buttons in order to add an event listener. Upon clicking each link, you can check if it is collapsed or not. If it is collapsed, remove the styles from its grandparent; otherwise, add the desired styles to its grandparent.

const collapseButtons = document.querySelectorAll('[data-toggle=collapse]');
collapseButtons.forEach(btn => {
  btn.addEventListener('click', () => {
    if(btn.classList.contains('collapsed')){
    console.log('x')
      btn.parentNode.parentNode.classList.add('selected-header');
    }
    else{
      btn.parentNode.parentNode.classList.remove('selected-header');
    }
  })
})
.selected-header{
  background:orange !important;
}
<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>

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

Retrieving text content from multiple classes with a single click event

There are numerous elements each having class names p1, p2, p3,...p14. Consequently, when attempting to extract text from the clicked class, text from all classes is retrieved! For instance, if the expected text is 80, it ends up being 808080080808080808 ...

I am still receiving an empty dropdown value despite implementing ng-selected

I am having issues with using ng-selected to retrieve the selected value from a dropdown. Instead of displaying the selected value, it appears blank. Here is the code snippet I have tried: <div> <select id="user_org" ng-model="selectedorg.all ...

Issue with Vue2's v-text functionality

Recently, I've delved into Vue2 and encountered a problem with form submission and validation on a single page. The issue lies in the error display process – I want errors to be shown beneath each form input as soon as they occur, rather than waitin ...

Image in the background not showing up on Chrome or Internet Explorer

The issue I'm facing is that the background-image displays correctly in Firefox, but not in Chrome or IE. Despite trying various solutions found on Stackoverflow, such as disabling my ad-blocker, placing the code in the head of the file: <head> ...

Error Encountered in Laravel 5.2 FormBuilder.php

Encountering Laravel 5.2 ErrorException in FormBuilder.php on line 1235 stating that the method 'style' does not exist. This error has me perplexed. I have already made updates to my composer.json file by adding "laravelcollective/html": "^5.2" ...

What is the best way to pause function execution until a user action is completed within a separate Modal?

I'm currently working on a drink tracking application. Users have the ability to add drinks, but there is also a drink limit feature in place to alert them when they reach their set limit. A modal will pop up with options to cancel or continue adding ...

Struggling with implementing a conditional template component within an AngularJS directive

As a Java/Python developer, I found myself working on an AngularJS project recently. While most concepts were easy to grasp, some of the syntax and functionality still elude me. The code I have handles login/logout functionality. If the user is logged in ...

Storing user-provided image files in Laravel: A comprehensive guide

I am facing an issue with a file insert box in my HTML file. The code looks like this: <input id="image" type="file" name="image" value="{{ old('image') }}" accept="image/gif, image/jpeg, image/png& ...

Pulling information from a database query to store it within a JavaScript variable

Using Ajax/JQuery, I successfully send the variable ($name) from page1.php to page2.php without refreshing the page. When the submit button is clicked, it sends me the var $name effectively. Additionally, in my JavaScript library for charts (AmCharts), the ...

What are the steps to leverage npm installed packages in my .js files?

I'm new to web development and I'm trying to incorporate node packages into my workflow. Specifically, I'm attempting to test out the axios ajax library. It seemed like this would be a simple task, but it's proving to be quite challeng ...

Populate a form with data retrieved from a MySQL query result

One aspect of my project involves a specific interface called 'designation.php' that contains a form. The goal is for users to enter a 'designation code' (which serves as the primary key) and then click the 'update' button, pr ...

How to successfully load the google-map-react library

After installing the google-map-react library locally in my app, I verified that it is listed in my package.json under dependencies. The corresponding folder also exists in the node_modules directory. However, when attempting to reference the component con ...

Utilizing v-for in Vue with TypeScript to generate multiple checkboxes

My goal was to capture the values of checkboxes and store them in an array using v-model. However, I encountered an issue where the first time I toggle a checkbox, it doesn't register. Only after checking a second box and hitting submit does the secon ...

React is unable to identify the prop `controlID` when used on a DOM element in React-Bootstrap Forms

While constructing a form with React components sourced from react-bootstrap, and taking guidance directly from an example provided in its documentation: <Form.Group controlId="formBasicEmail"> <Form.Label>Email address</Form.Label> ...

Unable to view Bootstrap modal upon click

Whenever I attempt to display a modal using Bootstrap, it mysteriously appears upon page refresh but fails to show up when the button is clicked. Ideally, I want the modal to only appear when the user clicks on the button. The structure of my html file lo ...

s3 key not found, The specified key does not exist. previewing file from a web link

After utilizing paperclip and s3, I successfully uploaded a word document and now I am seeking the ability to preview it directly from the database using an iframe. https://i.stack.imgur.com/ceCPu.png <iframe src="<%= agreement.document.url(:smal ...

Troubleshooting the problem with JavaScript's week start date

I am encountering an issue with JavaScript when trying to obtain the first day of the week. It seems to be functioning correctly for most cases, but there is a discrepancy when it comes to the first day of the month. Could there be something that I am ove ...

ReactJS - What is the best way to output a string from a functional component?

Utilizing @apollo/client in my React project for handling backend APIs. Within the file appollo.js, I am attempting to make a call to the backend API link based on certain conditions. Currently, appollo.js consists solely of functions and is not considere ...

Adjust the font size based on the dimensions of the container

I'm currently working on a script that dynamically sets the font-size based on the container's dimensions and the length of the text. This is what I have implemented so far. window.onload = function () { var defaultDimensions = 300; ...

How to set default props in Vue Select component?

I have been utilizing the vue-multiselect plugin from this website: Given that I plan to use it frequently, I am interested in establishing some default props. For instance, my aim is to have the selectLabel prop set as an empty string and possibly con ...