veränderliches Kachel-Grid

Hallo zusammen,
ich bin ein absoluter Einsteiger bei dem Thema, und suche nach einer Umsetzungsidee für Folgendes:

die Idealvorstellung:
Ich möchte ein Grid, dessen Kacheln (oberste Ebene, Kacheln 1-8) nach anklicken eine Art Drop-Down-Menü erzeugen, in dem wiederum mehrere Kacheln zu sehen sind (blau, 1-10). Beim Anklicken einer dieser Kacheln sollen sich die Kacheln in diesem Dropdown Menü alle ändern (grün, A-I) und neue Inhalte zeigen (am besten als Flip-Boxes/-Cards). Zur Veranschaulichung habe ich eine Zeichnung gemacht.

Mir ist klar, dass es diese Lösung nicht gibt und sie vermutlich viel eigenen Programmieraufwand verlangen würde (den ich wahrscheinlich nicht leisten kann). Deshalb bin ich auch sehr offen für Ideen/Plugins/Templates usw. , die zumindest in diese Richtung gehen.
"Wichtig" wäre nur, dass die Sache möglichst übersichtlich / geordnet ist und dass das alles passiert, ohne, dass dauernd ein neues Tab geöffnet wird, sondern der User auf derselben Seite bleibt.

Vielen Dank im Voraus,
d_d_

 

Danke für den Hinweis. Mit Javascript habe ich noch nie gearbeitet. Gibt es hier gute Vorlagen oder etwas, das ich nutzen/anschauen könnte?


Es geht darum eine strukturierte Informationsseite zu machen. Also Kachel 1 bis Kachel 8 wären Oberthemen wie z.B. Verkehr, Wirtschaft usw. .
Die nächste Ebene (1 bis 10, blau) soll aus Unterkategorien bestehen wie etwa: Verkehr -> Autos, Fahrräder, Busse, Züge, Straßen usw. .
Die letzte Ebene (A bis I, grün) soll aus konkreteren Beispielen o.Ä. bestehen, also z.B.: Verkehr -> Autos -> E-Autos, Taxis, SUVs usw. .

Der Inhalt sind einfach feste Texte oder Bilder, die mir momentan noch nicht vorliegen. Die werden aber, einmal festgelegt, voraussichtlich nicht mehr geändert.