Accordion / <details> <summary> & Co.

[einsiedler]

Hallo liebe Forumer, ich habe für mein Cardlayout einen ausklappbaren (Accordion) Bereich geplant.
Und zwar kann man halt ein wenig mehr Text (weiter)lesen wenn man möchte und anschliessend
den Link (in blau) darunter betätigen wenn man noch mehr Infos und zur Webseite möchte!
So habe ich es geplant.
Ich setze dabei <details> & <summary> ein, als Fallback für den IE und ältere Firefox
ein wenig script bääääh
Es klappt schon sehr gut: Demoseite

Nun habe ich aber ein Paar Fragen: A)
Wie schafft man so eine Art Weiche mit @media, wenn der Browser <details> & <summary>
versteht? Das DANN eben <details> & <summary> normal angewendet wird. Als Fallback soll dann eben das java-script aktiv werden, wenn das NICHT der Fall ist. Wäre es Dann noch sinnvoll wenn java-script deaktiviert ist, dass dann <details open> aktiv wird? was meint ihr? Oder braucht man das gar nicht?

B)
Wie bekomme ich es hin wenn man auf weiter scrollen klickt das sich dann das
"weiter lesen..." zu "wieder zuklappen..." wandelt. Dazu benötige ich Pseudoelemente + display:hidden; und ::before & ::after ist das richtig? Aber wie geht das dann?

UND wie fändet Ihr es wenn beim "aufklappen" der hinzukommende Text ÜBER dem "Link"
"wieder zuklappen..." stände, also die Position getauscht wird, "wieder zuklappen..."
stände ganz am unteren Rand? Wäre das besser?

Vielen Dank für eure Unterstützung!

Grüße der einsiedelnde