CSS-Problem bei Anzeige von Input und Details nebeneinander

[Rolf B]

Hallo Steffen,

hier mein Vorschlag:

https://jsfiddle.net/Rolf_b/mka89bq4/

Das HTML ist wegen der Testdaten etwas unübersichtlich.

Grundidee ist:

• möglichst wenig spezielle Klassen oder Gefummel mit data-Attributen
• Eventuell musst Du doch noch welche hinzufügen damit dein übriges Script läuft, aber guck's Dir erstmal an
• rekursive, selbstähnliche Struktur
• sinnvolle HTML Elemente
• Tastaturbedienbarkeit

Die download-area besteht aus einem Kopfbereich mit der "Alles auswählen" Checkbox. Das ist eine ganz normale Checkbox, die aber im CSS visuell versteckt wird. Dahinter steht ein Label, das der Checkbox zugeordnet ist, so dass ein Klick auf das Label die Checkbox betätigt.

Das ganze HTML setzt die Labels hinter die Checkboxen, so dass man sie mittels input[type=checkbox]:focus + label hervorheben kann, wenn die Checkbox vom User per Tabulatortaste fokussiert wurde.

Der Zustand der Checkbox wird über ein ::before Element des Labels dargestellt. Ich hatte deine Bilder nicht, braucht man auch nicht, ein Gradient tut's auch 😉

Jeder Ordner hat diesen Grundaufbau (directory-item oder file-item je nach Typ des aufgelisteten Verzeichniseintrags)

<ul class="directory-content">
  <li class="directory-item">
    ...
  </li>
  <li class="file-item">
    ...
  </li>
</ul>

Ein file-item sieht so aus:

  <li class="file-item">
     <input type="checkbox" 
            id="Pictos/Design/LED Light Show.pdf"
            value="Pictos/Design/LED Light Show.pdf"
            data-size="296662">
     <label for="Pictos/Design/LED Light Show.pdf">LED Light Show.pdf (289.71 KB)</label>
  </li>

Das ist etwas anders als bei Dir.

• Der Name der zu ladenden Datei incl. Pfad steht im value. So gehört sich das bei einer Checkbox
• Die ID, mit der Checkbox und Label gekoppelt werden, ist im Moment der Dateiname, das muss aber nicht sein. Das PHP Script könnte hier auch einen Zähler durchlaufen lassen (item00001 etc).
• Der physische Pfad auf dem Server gehört hier nicht hin. Dein PHP Script kennt ihn, aber der User draußen darf das nicht wissen.
• Spezielle Kennungen, ob das ein Datei-Item ist, sind nicht nötig. data-size ist hinreichend.

Ein directory-item ist etwas komplizierter:

   <li class="directory-item">
      <input type="checkbox" id="Pictos/Design" aria-label="Verzeichnis auswählen" />
      <label for="Pictos/Design"></label>
      <details>
         <summary>Design</summary>
         <ul class="directory-content">
            Siehe oben!!!
         </ul>
      </details>
   </li>

Das directory-item hat keinen Text im Label, darum habe ich ihn für nichtsehende User als aria-label notiert. Ein Screenreader wird ihn vorlesen. Hoffe ich 😉

Die Konstruktion checkbox+label ist aber gleich, so dass das gleiche CSS für die Checkbox genutzt werden kann. Dahinter kommt die details-Box für den Verzeichnisinhalt.

Für beide Item-Typen ist eine Flexbox gesetzt worden, so dass Checkbox, Label und Details-Element nebeneinander stehen.

Das Verzeichnis selbst ist eine Liste, so dass alles untereinander steht. Die Listenpunkte sind per CSS entfernt worden.

Das CSS verwendet die :is() Pseudoklasse. Folge dem Link, wenn Du die noch nicht kennst.

Das JavaScript sollte die nötige Logik für die Steuerung der Checkboxen zeigen. Sicherlich musst Du die Grundstruktur an deine Seite noch anpassen. Ich arbeite intensiv mit querySelectorAll um umständliche Schleifen zu vermeiden.

Good Luck 😀

Rolf