# Accordion Change color of open section **URL:** https://forum.pinegrow.com/t/accordion-change-color-of-open-section/3401 **Category:** Beginners **Created:** [October 2, 2019, 11:47am UTC](https://forum.pinegrow.com/t/accordion-change-color-of-open-section/3401 "2019-10-02T11:47:01Z") **Posts on this page:** 4 **Page:** 1
### Author: ![Dominic](https://avatars.discourse-cdn.com/v4/letter/d/13edae/32.png) [@Dominic](https://forum.pinegrow.com/u/Dominic) #### Post date: [October 2, 2019, 11:47am UTC](https://forum.pinegrow.com/t/accordion-change-color-of-open-section/3401/1 "2019-10-02T11:47:01Z")
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/](https://www.gaut.ch/tmp2/) **HTML** ``` Blank Template for Bootstrap
TEXT 1
TEXT 2
``` **CSS** ``` .title { color: #000000; } .title:hover { color: #ff0000; } ``` ---
### Author: ![Printninja](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/printninja/32/1181_2.png) [@Printninja](https://forum.pinegrow.com/u/Printninja) #### Post date: [October 8, 2019, 5:06am UTC](https://forum.pinegrow.com/t/accordion-change-color-of-open-section/3401/2 "2019-10-08T05:06:41Z")
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… ```auto #panels1 a:hover { color:red; } #panels1 a:focus { color:red; } ``` ---
### Author: ![Dominic](https://avatars.discourse-cdn.com/v4/letter/d/13edae/32.png) [@Dominic](https://forum.pinegrow.com/u/Dominic) #### Post date: [October 8, 2019, 9:18am UTC](https://forum.pinegrow.com/t/accordion-change-color-of-open-section/3401/3 "2019-10-08T09:18:05Z")
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; } ``` ---
### Author: ![Printninja](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/printninja/32/1181_2.png) [@Printninja](https://forum.pinegrow.com/u/Printninja) #### Post date: [October 8, 2019, 9:02pm UTC](https://forum.pinegrow.com/t/accordion-change-color-of-open-section/3401/4 "2019-10-08T21:02:17Z")
Yep, that also works. There’s often more than one way to do something in CSS.