Accordion Change color of open section

Beginners
1

Hi Guys
I use the standard accordion from Pinegrow. I want to show the hover color also in the open state of the panel. I have found some snippets on the net, but I can’t apply it to Pinegrow Accordion. Does anyone have a tip on how to solve this with CSS and Javascript?

https://www.gaut.ch/tmp2/

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name="description" content="">
        <meta name="author" content="">
        <title>Blank Template for Bootstrap</title>
        <!-- Bootstrap core CSS -->
        <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
        <!-- Custom styles for this template -->
        <link href="style.css" rel="stylesheet">
    </head>
    <body>
        <div class="container">
</div>
        <!-- Bootstrap core JavaScript
        ================================================== -->
        <!-- Placed at the end of the document so the pages load faster -->
        <div id="panels1" role="tablist"> 
            <div class="card"> 
                <div role="tab" class="card-header"> 
                    <h5> <a data-toggle="collapse" href="#collapse1" aria-expanded="true" aria-controls="collapse1" class="title">                                    Collapsible Group Item #1                                </a> </h5> 
                </div>                 
                <div id="collapse1" class="collapse show" role="tabpanel" aria-labelledby="headingOne" data-parent="#panels1"> 
                    <div class="card-body">                                TEXT 1                            </div>                     
                </div>                 
            </div>             
            <div class="card"> 
                <div role="tab" class="card-header"> 
                    <h5 class="mb-0"> <a class="collapsed title" data-toggle="collapse" href="#collapse2" aria-expanded="false" aria-controls="collapse2">                                    Collapsible Group Item #2                                </a> </h5> 
                </div>                 
                <div id="collapse2" class="collapse" role="tabpanel" aria-labelledby="headingTwo" data-parent="#panels1"> 
                    <div class="card-body">                                TEXT 2                            </div>                     
                </div>                 
            </div>             
        </div>
        <script src="assets/js/jquery.min.js"></script>
        <script src="assets/js/popper.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script>
    </body>
</html>

CSS

.title {
    color: #000000;
}

.title:hover {
    color: #ff0000;
}
2

Do it by changing the color of links under the accordion’s id. The standard bootstrap accordion in Pinegrow has an id of #panels1. So if you want the links to be red on hover and to stay red while open, your CSS would be like this…

#panels1 a:hover {
    color:red;
}

#panels1 a:focus {
    color:red;
}
3

Thx Printninja. In the meantime I found what I was looking for:

CSS

a.title:hover[aria-expanded="true"] {
    color: red;
}

a.title[aria-expanded="true"] {
    color: red;
}

.title {
    color: black;
}

.title:hover {
    color: grey;
}

.title:focus {
    color: red;
}
4

Yep, that also works. There’s often more than one way to do something in CSS.