jQuery - wysuwane menu z podświetleniem onClick, jak poprawić kod?

Zrobiłem menu, gdzie po najechaniu kursorem pojawia się podświetlenie (hover), po kliknięciu na dany element wysuwa się treść, a po jego ponownym kliknięciu treść się chowa:




To wszystko działa bez zarzutu, ale chciałem całość nieco rozbudować, ale tutaj już - jako że w istocie nie znam się na budowie stron - nie potrafię. A chciałem zrobić dwie rzeczy:

1. by po kliknięciu kolejnego elementu menu, chowała się treść elementu poprzednio klikniętego, tak by nigdy nie była widoczna na raz treść więcej niż jednego elementu menu,
2. by po kliknięciu dowolnego elementu menu zostawało podświetlenie, tj. żeby podświetlenie pojawiało się nie tylko na czas najechania kursorem, ale na tak długo, jak długo aktywny jest element menu (wysunięta treść).

Z pewnością można rozbudować funkcję toggle, by chowała poprzednio kliknięty element, ale przy moich próbach nie potrafiłem rozdzielić chowania i wysuwania. Ale jak zrobić punkt drugi zupełnie nie wiem.

Strona już wisi:fhs.org

Z góry dziękuję za pomoc.

Dodano po 2 [minuty]:

Wkradł się błąd w adresie strony, powinno być org.pl
Dodam jeszcze, że używam jQuery 1.11.2.

Wystarczy taki skrypt:



Pierwsza funkcja zamyka otwarte divy z klasą teksty (jeśli są takie). Druga usuwa podświetlenie z innych elementów li (też jeśli takie istnieją). Trzecia otwiera lub zamyka kliknięty div. Czwarta dodaje podświetlenie.

Jako podświetlenie dodałem klasę lajt-hover. Wywaliłem kupę niepotrzebnych divów w divach i zbędnych id. Nie wiem do czego jest wywoływana funkcja pokaz_tekst('#tekst1') więc też ją usunąłem.

Kod strony był nieczytelny. Zupełny brak zachowania semantyki kodu. Trochę ją poprawiłem, bo aż raziło w oczy. Wszystko masz w załączniku.

Bardzo ci dziękuję za pomoc! Faktycznie w kodzie znalazło się trochę śmieci, to wynik licznych eksperymentów. Tym bardziej więc dziękuję za poprawki!