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?

Normalnie div nie jest focusowalny. Trzeba dodac np. tabindex atrybut.

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

Btw.dziwi mnie, że to działa.

CSSem tego nie zrobisz, ponieważ wymaga to zapamiętania stanu - przyda się JS.

Edit: nieważne, sposób @jarekr000000 jest prawidłowy.

Patryk27 napisał(a):

CSSem tego nie zrobisz, ponieważ wymaga to zapamiętania stanu - przyda się JS.

CSSem można spokojnie ogarnąć stan. I takie FAQ żadnego JS nie wymaga.

EDIT: Dowód przez przykład:
Stara prezentacja , robiona jeszcze dla Capgemini -
wyłącz JS i wejdź na strone:
http://www.setblack.pl/aterchart-web/content/html5academy/css/tictactoe.html

Całość po dodaniu tabindex="0" działa idealnie, dokładnie taki efekt o który mi chodziło!!

Temat rozwiązany, dzięki za pomoc!