Elemente richtig floaten

  • Hallöchen,


    ich versuche mich gerade mit der Erstellung von einer Webseite. Dazu verwende ich HTML, CSS und JavaScript.

    Ich möchte ein kleines Accordion programmieren, die Funktionalität ist vorhanden, aktuell hackt es etwas an dem Design. Ich hoffe hier kann mir jemand helfen:

    Das Ganze soll wie folgt aussehen:

    Es soll links eine Spalte mit Buttons geben, welche anklickbar sind. Sobald der Button angeklickt wird, soll rechts der versteckte Content auftauchen, mit Titel, Text und Grafik. Sobald ein anderer angeklickt wird, soll das ursprüngliche verschwinden und das neue erscheinen.

    Nun zum Problem:

    Ich bekomme die Buttons nicht untereinander, solange Text ausgeklappt ist. Das heißt wähle ich den zweiten Button, erscheint rechts der Text, welcher höher ist als der Button und alle Buttons ab Nummer 3, also alle darunter liegend rutschen nach unten.

    Anbei findet hier eine Grafik wie es aussehen sollte und wie es aktuell ist.


    Beste Grüße

    Dateien

    • CSS.jpg

      (762,46 kB, 6 Mal heruntergeladen, zuletzt: )
  • Vielen Dank für den Hinweis.

    Ich habe mich jetzt mal mit den Flexboxen beschäftigt, allerdings bin ich mir nicht ganz sicher inwiefern ich das richtig verstehe. Anhand des oben gezeigten Ziels müsste ich doch die graue Box zu einem display: flex machen mit flex-direction row. Dann füge ich die Buttons als ein Item (nennen wir die Klasse: flex-buttons) und den Text Bereich als Item (sagen wir flex-text).

    Die Flex-Buttons müssten nun selber zu einem internen Flex Container werden und die Eigenschaften display: flex und flex-dircetion: column erhalten, damit die Buttons untereinander sind.


    Nun erhalte ich das Ergebnis, dass alles in einer Zeile erscheint, Also erst Button, dann Text, dann Button. Der zweite Text wird aufgrund der Accordion Funktion nur angezeigt, wenn ich den zweiten Button anklicke.


    Was mache ich denn falsch? Ich habe mich spontan versucht so gut es geht einzulesen, grundsätzlich steht in der Literatur das Items problemlos zu container werden können.

  • HTML:

    Und CSS:




    Ich denke ich habe das Problem gefunden, weiß es allerdings nicht zu beheben.

    Ich platziere im HTML Code

    Button - Text - Button -Text

    Das mache ich, damit mein Accordion das nächste Div auswählt und anzeigt. Wenn ich Button - Button - Text - Text mache funktioniert das Accordion nicht, aber die Flexbox.


    Beste Grüße

  • Leider kann ich aus dem HTML und CSS nicht erkennen, wie dieses Accordion funktioniert. Weder finde ich Check- oder Radiobuttons noch ein Javascript, das es macht. Irgend wie mit diesem kit.fontawesome? Oder der CSS-Datei, die Du einbindest? Kannst Du das erklären?


  • Entschuldige ich habe den Flexbox Test Code hochgeladen .. das ist nun der mit der Accordion Funktion, selbes Problem

  • Danke, so wird das Ganze klar. Ohne es ein wenig umzuorganisieren, wird sich dein gewünschtes Layout wohl nicht realisieren lassen. Also links ein Container mit den Buttons und rechts einer mit den Inhalten. Und dann muss man eine Beziehung zwischen den Buttons links und den Inhalten rechts herstellen. Ich dachte zunächst daran, das mit einem data-Attribut bei den Buttons zu machen, aber mit diesem HTML und Javascript dürfte das gar nicht notwendig sein:

    (ungetestet)

    Das HTML musst Du selber noch vervollständigen.

  • Vielen lieben Dank, Design Technisch passt das nun so. Allerdings funktioniert das Akkordeon nicht mehr.

    Die Buttons liegen untereinander, aber die Texte werden dauerhaft angezeigt... ehrlichgesagt war ich froh das das Akkordeon irgendwie funktioniert hat, nur leider weiß ich nicht genau wie ich das ändern muss:

    Anbei der neue Code

  • Da gibt es jetzt zwei Probleme:

    1. Im HTML und CSS verwendest Du für die Buttons die Klasse "flexbox-button2", im Javascript jedoch "flexbox-button", d. h. Du musst das Javascript so ändern:

    Code
    1. <script>
    2. const buttons = document.getElementsByClassName('flexbox-button2'),
    3. contents = document.getElementsByClassName('flexbox-content');
    4. for (let i = 0; i < buttons.length; i++) {
    5. buttons[i].addEventListener('click', function () {
    6. contents[i].classList.toggle('active')
    7. });
    8. }
    9. </script>

    Und im CSS musst Du die den Content zunächst unsichtbar machen, indem Du die Höhe auf 0 setzt:

    Code
    1. /* Content zunächst unsichtbar machen: */
    2. .flexbox-content .flexbox-text {
    3. height: 0;
    4. overflow: hidden;
    5. }
    6. /* Ist die Klasse "active" gesetzt, den Content sichtbar machen: */
    7. .flexbox-content.active .flexbox-text {
    8. height: 100%;
    9. }
  • Wunderbar, vielen herzlichen Dank .. jetzt muss ich nur noch die Funktion wieder einbinden, dass der Text des einen Buttons schließt wenn ich einen anderen anklicke und der erste Text soll als Default quasi immer offen sein.


    Code
    1. for (let i = 0; i < buttons.length; i++) {
    2. buttons[i].addEventListener('click', function () {
    3. contents[i].classList.toggle('active')
    4. });

    Mit diesem Teil spreche ich den Button an, welche angeklickt wird und gebe ihm die Funktion mit, den Content auf active zu setzen. Wie genau kann ich denn den vorherig angeklickten Button mit diesem Code ansprechen? Bzw. wie kann ich ihm sagen schließe den aktuellen Text?

    Mein Gedanke wäre zunächst zu prüfen was y ist und dann diese Zeile zufügen:

    Code
    1. contents[y].classList.toggle('close')

    close muss es dann in css geben und das entspricht dann einfach dem unsichtbaren Content.


    Und nun zum zweiten Punkt der geöffnete Button:

    Code
    1. der erste Button bekommt eine Id="inital-open" im HTML
    2. CSS dann folgendes
    3. #inital-open{
    4.     height: 100%;
    5. }
  • Zitat

    Wie genau kann ich denn den vorherig angeklickten Button mit diesem Code ansprechen?

    Das kannst Du, indem Du querySelector verwendest und die Klasse "active" angibst:

    const contentActive = document.querySelector('.flexbox-content.active');

  • Code
    1. .flexbox-content.close .flexbox-text {
    2. height: 0;
    3. overflow: hidden;
    4. }


    Entschuldige, ich habe leider keine Ahnung von JavaScript, ich habe jetzt diese Zeile eingebunden und in der For Schleife soll er nun den alten Text schließen, leider macht er nun gar nichts mehr. Also er öffnet auch kein Text mehr. Abgesehen von dem der Default ist

  • Wenn man das vorige Element schließen will, wird es leider ein wenig komplizierter. Ich habe das folgende Javascript kommentiert, damit Du verstehst, was sich abspielt:

  • Eine aller letzte Frage hätte ich dazu dann doch noch.. ich würde gerne wie beschrieben den ersten Text offen haben.

    Meine Idee:

    dem ersten Text die id: inital-open geben und im JS sowas


    Code
    1. document.getElementsByID('initial-open').classList.toggle('active')


    allerdings zeigt er mir den Text trotzdem erst auf den Kopfdruck an...

  • Javascript beachtet Groß- und Kleinschreibung. getElementsByID musst Du so schreiben: getElementById.

    Wenn der erste Text gleich offen sein soll, brauchst Du dem betr. Element nur die Klasse "active" zu geben.

    Oder möchtest Du, dass er immer offen bleibt?

  • Es soll nur am Anfang geöffnet sein und dann wie alle anderen geschlossen werden können


    Mein Text hat allerdings bereits eine Klasse die ich benötige, entsprechend kann ich keine zweite Klasse dem selben Element mitgeben

    Code
    1. <div class="flexbox-text">
    2.     <h5>lallaala</h5>
    3.     <p>xx</p>
    4. </div>