Как установить цвет заголовка аккордеона jQuery с помощью скрипта и CSS

У меня простой аккордеон. Вот мой HTML-код.

 <div id="accordion">
            <div>
                    <h3 id="a1"><a href="#">First</a></h3>
                    <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
            </div>
            <div>
                    <h3 id="a2"><a href="#">Second</a></h3>
                    <div>Phasellus mattis tincidunt nibh.</div>
            </div>
            <div>
                    <h3 id="a3"><a href="#">Third</a></h3>
                    <div>Nam dui erat, auctor a, dignissim quis.</div>
            </div>
    </div>

Мой вопрос в том, что когда отображается мой аккордеон, все свернутые заголовки будут иметь один и тот же цвет, кроме активного заголовка или расширенного заголовка, которые будут единственными, отображающими только другой цвет. Затем, когда я снова нажму на другой заголовок, этот расширенный заголовок будет иметь другой цвет, и все свернутые заголовки будут окрашены в тот же цвет. Как я могу установить цвет с помощью jQuery и CSS? Пожалуйста помоги. Спасибо.