Du hast auch ein komisches Konstrukt mit floats.
Auch weiß ich noch immer nicht was du eigentlich bezwecken willst mit der Darstellung, aber wenn ich raten darf: Warum floats? Das ist so letztes Jahrtausend. Heutzutage kannst du auch gerne flexbox dafür verwenden. (Grid wenn es über mehrere Zeilen gehen soll)

Bezüglich deiner Frage zum debuggen: Drücke F12 im Chrome/Firefox und du hast alles was du zum debuggen einer Seite brauchst.

Edit: Falls du flexbox verwendest kannst du dir die ganze Sache mit der Berechnung auch sparen, dann wird die Breite unter den verfügbaren Elementen aufgeteilt.

Die Liste nicht vertikal sondern horizontal darzustellen. Ich habe zunächst gedacht ich mach das ganz simpel mit dem jquery ui accordion, daher ist auch der Code:

jQuery Simple Horizontal Accordion « Design Chemical – jQuery, Wordpress, Tutorials & Plugins

P.S.: Ich hab gedacht ich kann auch die Steuerung mit jqery ui realisieren.

Keine Ahnung wieso du dafür ein fast 10 Jahre altes tutorial ausgrabst, aber zeitgemäß ist das auf keinen Fall mehr.
Für eine Darstellung ist CSS verantwortlich.
Falls du Logik brauchst wie mit buttons dann ist JS notwendig.

Also gut. Auf jeden Fall stimmt die Logik ja.

Was wird mit $this.toggleClass('active'); getoggelt?

Dies hier
#accordion li.active { width: 450px; }

Die Klasse heisst ja aber .active, dewegen ja auch:

var totalActiveElements = $('.active').length;
UND
$('.active').each(function(e) {...}

toggleClass heißt dass die der Funktion mitgegebene Klasse getoggled wird, also in dem Fall "active". Gibt es die Klasse wird sie hinzugefügt, ansonsten entfernt.

Die Klasse heißt nicht ".active", der Punkt vor active sagt CSS lediglich dass es sich um einen Klassennamen handelt. Der Name der Klasse ist nur "active".

O.k.,
Beim klicken wird active an- und ausgeschaltet. In totalActiveElements (streng genommen: int totalActiveElements) wird die Anzahl der aktiven gespeichert, dann der Wert für die Sichbarkeit errechnet.
data('for') verknüft die aktiven Buttons mit den Listenfeldern, In der Schleife werden die width-Werte der Listenfelder dann vergeben. (ID durch die Verknüpfung errechnet)


Was micht stört ist dieser CSS Eintrag:
wenn active "an" ist, dann müssten doch immer diese 450px erscheinen?

Auch irritierend ist:

Warum werden hier erstmal alle Breiten der Listen auf 0px gesetzt bevor die Schleife startet?

Genau, soweit richtig, abgesehen davon das JS streng genommen kein int kennt. Zumindest nicht so wie man es von zB Java gewohnt ist.



Hier bitte aufpassen, das gilt nur für li-Elemente die im accordion sind.
In meinem JS setze ich die Klasse aber nur auf die buttons.
Dein CSS habe ich nicht angepasst, da es mir nur um die Logik ging.



Damit dann auch nur die li-Elemente eine Breite bekommen die auch wirklich aktiv sind. Hier gibt es mehrere Wege dies zu lösen, aber mein Denkansatz hier war: Blende zuerst alle Elemente aus und dann zeige wirklich nur die Elemente, wo der button auch wirklich aktiv ist.


Und wie weiter oben schon gesagt: Wenn du auf modernes CSS setzt brauchst du all diese Berechnungen nicht, dann passt der Browser die Elemente so an, wie du sie brauchst. Aber da ich (immer noch nicht) weiß, was du genau erreichen willst, habe ich mich nur auf die generelle JS Logik konzentriert.

Ich will JS sehr gut beherrschen, aber ich komm natürlich nicht um CSS drumrum.

Um die Breiten zu verändern gibt es bei flexbox: flex-grow, felx-shrink und flex-basis, was sich ähnlich wie width verhält.
Ich habe mit flexbox leider kein Beispiel gefunden, wo ich die Steuerung der container wie hier mit JS (Beispiel von #cloned) realisiert umsetzen.

Hat jemand eine Tip, wie ich das CSS hier anpassen kann, mit oder ohne flexbox?

Vielen Dank,

Um das mit flexbox umzusetzen reicht folgender Aufbau:

CSS:

Du kannst nach belieben einzelne Unterelemente von <div class="container"> ausblenden, die restlichen Elemente teilen sich den Platz auf.
Sprich du brauchst, wenn das dein Ziel ist, nur die benötigten Elemente ein- und ausblenden.