I want to highlight the panel which has been opened by the user. When a user clicks the button in the card-header the background is set to red. This works without any fuss, as shown in the snippet.
In some cases I’ll have a panel, usually the first, open on page load, which I set with the class show. My goal is the set the background of this card-header to red as well on page load.
The buttons in the card-headers are set using js, as shown in the code snippet.
I reckon I have to use javascript to toggle classes.
First I added a new class highlight and added the following CSS code:
.accordion .card-header.highlight {
color: #fff;
background-color: red;
}
Then I added the following js (please be aware that I find js quite difficult to comprehend, albeit slowly but surely I’m learning) to try set the background of the header of the open pane on page load.
$(document).ready(function(){
// Add class highlight to panel with show class
$(".collapse.show").each(function(){
$(this).prev(".card-header").addClass("highlight");
});
// toggle highlight class
$(".card-header .btn").click(function(){
$(".card-header").toggleClass("highlight");
});
});
I looks very messy, probably because it is, and doesn’t produce the desired result.
How can I set the background (red) of the header of the open panel on page load and how can I toggle classes using js?
/** Accordions JavaScript **/
/** Dynamically add id **/
$.each($(".accordion"), (function (index) {
$(this).attr("id", "accordion_" + parseInt(index + 1));
}));
/** Dynamically add interaction **/
$.each($(".accordion > .card"), (function (index, value) {
var num = index + 1;
$(value).children(".card-header").attr("id", "heading_acc_" + num);
$(value).find(".card-header > .card-title").wrapInner("<button class="btn btn-link" type="button" data-toggle="collapse" aria-expanded="false"></button>");
$(value).find(".card-header > .card-title > button").attr({
"data-target": "#collapse_acc_" + num,
"aria-controls": "collapse_acc_" + num
});
$(value).children(".collapse").attr({
id: "collapse_acc_" + num,
"aria-labelledby": "heading_acc_" + num
});
}));
$(document).ready(function(){
// Add class highlight to panel with show class
$(".collapse.show").each(function(){
$(this).prev(".card-header").addClass("highlight");
});
// toggle highlight class
$(".card-header .btn").click(function(){
$(".card-header").toggleClass("highlight");
});
});/* ========= Accordions ==========*/
.accordion .card .card-header {
border-bottom: 1px solid grey
}
/* Accordion Standard */
.accordion:first-child {
margin-top: 5px;
border-radius: 0
}
.accordion h1,
.accordion h2,
.accordion h3,
.accordion h4,
.accordion h5,
.accordion h6 {
font-size: 1.125rem
}
.accordion .card {
border: 0;
border-radius: 0;
padding-top: 0;
padding-bottom: 0
}
.accordion .card .card-title {
margin-bottom: 0;
margin-top: 0;
padding-top: 0;
padding-bottom: 0
}
.accordion .card .card-title button {
color: black
font-weight: bold;
font-size: 1.25rem;
padding: 1.25rem;
border: 1px solid grey
border-radius: 0;
background-color: #FFF;
padding-left: 70px
}
.accordion .card .card-title button:hover,
.accordion .card .card-title button:focus {
color: #174EA6
}
.accordion .card .card-title button::after {
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1;
font-family: "Font Awesome 6 Free";
font-weight: 900;
position: absolute;
top: 1.5rem;
left: 2rem
}
/* Open and Close Icon */
.accordion .card .card-title button[aria-expanded="true"]:after {
content: "f077";
transform: rotate(0deg);
transition: .3s all;
color: black
}
.accordion .card .card-title button[aria-expanded="false"]:after {
content: "f054";
transform: rotate(90deg);
transition: .3s all;
color: black
}
.accordion .card .card-header {
padding: 0
}
.accordion .card .card-header button {
border: 1px solid grey
background-color: #fff;
width: 100%;
text-align: left
}
.accordion .card-body {
border: 1px solid grey;
background-color: white
}
/* Active Accordion Panel - Background and Text Color */
.accordion .card .card-header button[aria-expanded="true"] {
background-color: red;
color: #ffffff
}
.accordion .card-header.highlight {
color: #fff;
background-color: red;
}<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/js/bootstrap.min.js"></script>
<link href=" https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/css/bootstrap.min.css" rel="stylesheet" />
<h2>Accordion: Group of 2 - First panel open</h2>
<!-- Accordion headings should be changed to respect page hierarchy -->
<!--start accordion-->
<div class="accordion mdb-shadow-4 my-5">
<div class="card">
<div class="card-header">
<h2 class="card-title">
Accordion 1 of 2
</h2>
</div>
<div class="collapse show">
<div class="card-body">
<p>Loren ipsum
</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h2 class="card-title">
Accordion 2 of 2
</h2>
</div>
<div class="collapse">
<div class="card-body">
<p>Insert Accordion 2 of 2 content here.</p>
</div>
</div>
</div>
</div>
<!--end accordion-->
2
Answers
You need to select the button that receives the styles, and filter the n
.cardelement opened . here.card:first-of-typeExample
You could also simplify a bit. You’re already dynamically adding the wrapper on your accordion components. The only thing you’re missing is that you’re not setting the
aria-expandedattribute to true for the ones that have the show property. To do that you can check for the presence of theshowclass and add the value dynamically as follows:Now there’s no need to have the extra code to add the highlight class and thus you don’t need it in your CSS either.
Working example below: