CSS selektor nie działa

Cześć!
Przychodzę z problemem po dość długiej przerwie od webmasteringu. Potrzebuję zrobić zwykłą stronkę internetową, na której jest zakładka FAQ. Chcę, żeby było widoczne tam pole z pytaniem, a po kliknięciu na strzałkę pole by się rozwijało i poniżej ukazywała by się odpowiedź. Może nie wytłumaczyłem tego zbyt profesjonalnie, bo nie miałem innego pomysłu jak to wytłumaczyć słownie, więc podsyłam link do strony, gdzie funkcjonuje to w stylu, w którym widział bym to również na swojej stronie https://gwiazdylegii.pl/faq.html Mam więc prostego diva w html'u, w którym jest jedno pytanie i jedna odpowiedź. Coś w tym stylu :

<div class="FAQ">
          <p class="question">Pytanie</p>
          <p class="answer">Odpowiedź</p>
</div>

Nie dodawałem jeszcze żadnego buttona który by mi to rozwijał, więc zrobiłem na razie tak, żeby klikając na tego div'a odpowiedź na pytanie się pokazywała, a po ponownym kliknięciu się chowała.

.FAQ {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    height: 120px;
    width: 85%;
    background-image: url(../images/qIa2.png);
    overflow-y: hidden;
    border-bottom: 1px solid #eeeeee;
    transition: 0.5s
}

.FAQ:focus {
    height: 240px;
    background-image: url(../images/qIa1.png);
}

Diva zrobiłem jednego, zamiast background-color wolałem zastosować background-image, który po kliknięciu by się rozsuwał. Niestety próbowałem kilku selektorów i żaden nie rozwiązał mojego problemu, za to jeśli zastosuję selektor :hover to całość działa, jednak całość rozsuwa się tylko w momencie, kiedy najadę na div'a kursorem, a nie przy kliknięciu. W którym miejscu zrobiłem błąd, bądź czego brakuje w moim kodzie, żeby całość działała?