Onclick accordion Icons color should change to white

HTML & CSS
,
2

Hi,

This seems to be a continuation of this thread.

You can change the colour of the plus icon and dropdown arrow by using the highlight class.

.panel-heading.highlight .accordion-toggle:after{color:#fff}/* arrow*/
.panel-heading.highlight .accordion-toggle .indicator{color:#fff}/* plus minus*/

The icons are supplied by the glyphicons font so you don’t really want to start changing them as that defeats the purpose of using that library of icons. If you really want your own icons then you will need to upload your own images and use them instead of the glyphicon fonts.

This means writing your own css to hide and show the image that you want. It’s not difficult but you need to be familiar with css. You would then again use the highlight class to change the image depending on whether its open or closed. As you are a beginner I would suggest you stay with the standard icon until you gain a little more experience.

On another issue if you want the highlighted item to switch back to gray from green then change the js at the bottom to this:

<script>

function toggleChevron(e) {
      $(e.target)
        .prev('.panel-heading')
        .find('i.indicator')
        .toggleClass('glyphicon-minus glyphicon-plus');
				$(e.target).prev('.panel-heading').toggleClass('highlight');
}
$('#accordion').on('hidden.bs.collapse', toggleChevron);
$('#accordion').on('shown.bs.collapse', toggleChevron);

</script>