Elemente richtig floaten

Learner2021 · 29. Oktober 2021

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

m.scatello · 29. Oktober 2021

Float ist der falsche Ansatz, beschäftige dich mit Flexbox oder Grid

Learner2021 · 29. Oktober 2021

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.

Sempervivum · 29. Oktober 2021

Was Du da verbal beschreibst, liest sich vernünftig. Poste doch mal das HTML und CSS, damit wir sehen können, wo der Fehler liegt.

Learner2021 · 30. Oktober 2021

HTML:

HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>flexbox</title>
<script src="https://kit.fontawesome.com/a6dd479587.js" crossorigin="anonymous"></script>
<link href="accordionCSS.css" rel="stylesheet" type="text/css">

</head>
<body>
    <div class="flex-container">
            <div class="flex-buttons">
                <h5 class="flex-item">Titel 1</h5>
            </div>
            <div class="flex-text">
                <p>Das ist der Beispieltextxxxxxxxxxxxxxxxxx
                    xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
                    xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
                    xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
                    xxxxxxxxxxxxxxxxxxxxxxx
                    xxxxxxxxxxxxxxxxxxxxx
                    xxxxxxxxxxxxxx
                    xxxxxxxxxxxxxxx</p>
            </div>
            <div class="flex-buttons">
                <h5 class="flex-item">Titel 2</h5>
            </div>
            <div class="flex-text">
                <p>Das ist der Beispieltextxxxxxxxxxxxxxxxxx
                    xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
                    xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
                    xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
                    xxxxxxxxxxxxxxxxxxxxxxx
                    xxxxxxxxxxxxxxxxxxxxx
                    xxxxxxxxxxxxxx
                    xxxxxxxxxxxxxxx</p>
            </div>
            
    </div>
</body>
</html>

Alles anzeigen

Und CSS:

Code

@charset "utf-8";
/* CSS Document */
.flex-container{
    display: flex; 
    flex-direction: row; 
    background-color: aqua; 
}
.flex-buttons{
    display: flex; 
    flex-direction: column;
    background-color: chocolate; 
}
.flex-text{
    background-color: blue; 
}

Alles anzeigen

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

Sempervivum · 30. Oktober 2021

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?

Learner2021 · 30. Oktober 2021

Code

<section class="flexbox-container" id="flexbox">
            <div class="flexbox-content">
                <button class="flexbox-button">
                
                    <div class="flexbox-button-text">
                        <h5>Button</h5>
                    </div>

                </button>
                <div class="flexbox-text">
                    <h5> bla bla </h5>
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
                </div>
            </div>
            <div class="flexbox-content">
                <button class="flexbox-button">
                
                    <div class="flexbox-button-text">
                        <h5>Button</h5>
                    </div>

                </button>
                <div class="flexbox-text">
                    <h5> bla bla </h5>
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
                </div>
            </div>
        
        
        <!-- JavaScript Code --> 
        <script>
            const accordion = document.getElementsByClassName('flexbox-content'); 
            for (i = 0; i<accordion.length; i++){
                accordion[i].addEventListener('click', function(){
                    this.classList.toggle('active')
                })
            }
        </script>
    </section>

Alles anzeigen

Code

.flexbox-container{
    width: 100%; 
    padding: 4% 12.5%; 
    background-color: #F2F2F2;  
    display: flex; 
}
.flexbox-content{
    
    display: flex; 
    float: left; 
    
}
.flexbox-button{
    width: 400px; 
    height: 100px; 
    background-color: #fff; 
    color: #000; 
    display: flex; 
    border-radius: 10px;
    box-shadow: 3px 4px 10px #000;
}
.flexbox-button:hover {
    background-color: #ffcb36; 
    color: #fff; 
}
button{
    background-color: transparent;
    border: none; 
}

.flexbox-button-text{
    text-align: left; 
    margin: 4%; 
        
}
.flexbox-button-text h5{
    font-size: 1em; 
    text-transform: uppercase;
     
}
.flexbox-button-text p{
    font-size: 0.75em; 
}
.flexbox-text{
    padding-left: 5%; 
    text-align: left; 
    height: 0%; 
    overflow: hidden; 
    transition: 0.5s; 
    overflow-y: auto;
}
.flexbox-content.active .flexbox-text{
    height: 100%; 
    
}
.flexbox-text h5{
    color: #363636; 
    text-transform: uppercase;
}
.flexbox-text p{
    color: #BFBFBF; 
}

Alles anzeigen

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

Sempervivum · 30. Oktober 2021

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:

Code

    <section class="left-buttons">
        <!-- hier die Buttons mit der Klasse "flexbox-button" untereinander -->
    </section>

    <section class="right-content">
        <!-- hier die Content-Container mit der Klasse flexbox-content untereinander -->
    </section>
    <script>
        const buttons = document.getElementsByClassName('flexbox-button'),
            contents = document.getElementsByClassName('flexbox-content');
        for (let i = 0; i < buttons.length; i++) {
            buttons[i].addEventListener('click', function () {
                contents[i].classList.toggle('active')
            });
        }
    </script>

Alles anzeigen

(ungetestet)

Das HTML musst Du selber noch vervollständigen.

Learner2021 · 30. Oktober 2021

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

Code

<section class="flex-container">
     <section class="left-buttons">
        <!-- hier die Buttons mit der Klasse "flexbox-button" untereinander -->
         <button class="flexbox-button2">
                
                    <div class="flexbox-button-text">
                        <h5>Button 1</h5>
                    </div>

        </button>
         <button class="flexbox-button2">
                
                    <div class="flexbox-button-text">
                        <h5>Button 2</h5>
                    </div>

        </button>
    </section>
    <section class="right-content">
        <!-- hier die Content-Container mit der Klasse flexbox-content untereinander -->
        <div class="flexbox-content">
                
                <div class="flexbox-text">
                    <h5> bla bla </h5>
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
                </div>
        </div>
        <div class="flexbox-content">
            
                
                <div class="flexbox-text">
                    <h5> bla bla </h5>
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
                </div>
        
            </div>
    </section>
    
    <script>
        const buttons = document.getElementsByClassName('flexbox-button'),
            contents = document.getElementsByClassName('flexbox-content');
        for (let i = 0; i < buttons.length; i++) {
            buttons[i].addEventListener('click', function () {
                contents[i].classList.toggle('active')
            });
        }
    </script>
    </section>

Alles anzeigen

Code

@charset "utf-8";
/* CSS Document */
.flex-container{
    display: flex; 
    flex-direction: row; 
    background-color: aqua; 
}
.left-buttons{
    display: flex; 
    flex-direction: column;
    background-color: chocolate; 
}
.flex-text{
    background-color: blue; 
}
.flexbox-content{
    flex-direction: column;
}
.flexbox-button2{
    width: 400px; 
    height: 100px; 
    background-color: #fff; 
    color: #000; 
    display: flex; 
    border-radius: 10px;
    box-shadow: 3px 4px 10px #000;
}
.flexbox-button2:hover {
    background-color: #ffcb36; 
    color: #fff; 
}

.flexbox-content.active .flexbox-text{
    height: 100%; 
}

Alles anzeigen

Sempervivum · 30. Oktober 2021

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

        <script>
            const buttons = document.getElementsByClassName('flexbox-button2'),
                contents = document.getElementsByClassName('flexbox-content');
            for (let i = 0; i < buttons.length; i++) {
                buttons[i].addEventListener('click', function () {
                    contents[i].classList.toggle('active')
                });
            }
        </script>

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

Code

        /* Content zunächst unsichtbar machen: */
        .flexbox-content .flexbox-text {
            height: 0;
            overflow: hidden;
        }

        /* Ist die Klasse "active" gesetzt, den Content sichtbar machen: */
        .flexbox-content.active .flexbox-text {
            height: 100%;
        }

Learner2021 · 30. Oktober 2021

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

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

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

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

der erste Button bekommt eine Id="inital-open" im HTML 

CSS dann folgendes 

#inital-open{
    height: 100%;
}

Sempervivum · 30. Oktober 2021

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');

Learner2021 · 30. Oktober 2021

Code

const buttons = document.getElementsByClassName('flexbox-button2'),
      contents = document.getElementsByClassName('flexbox-content');
      contentActive = document.querySelector('.flexbox-content.active')
        for (let i = 0; i < buttons.length; i++) {
            buttons[i].addEventListener('click', function () {
               
                contentActive.classList.toggle('close')
                
                
                contents[i].classList.toggle('active')
                
            });
        }

Alles anzeigen

Code

.flexbox-content.close .flexbox-text {
            height: 0;
            overflow: hidden;
        }

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

Sempervivum · 30. Oktober 2021

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:

Code

        <script>
            const buttons = document.getElementsByClassName('flexbox-button2'),
                contents = document.getElementsByClassName('flexbox-content');
            // Weil sich der aktive bzw. offene Content von Klick zu Klick ändert
            // müssen wir das aktive Element innerhalb des Eventlisteners ermitteln.
            // contentActive = document.querySelector('.flexbox-content.active')
            for (let i = 0; i < buttons.length; i++) {
                buttons[i].addEventListener('click', function () {
                    // Jetzt das aktive Element ermitteln:
                    const contentActive = document.querySelector('.flexbox-content.active');
                    // Es kann sein, dass
                    // 1. das aktive Element das gerade geklickte ist
                    // 2. es gerade kein aktives Element gibt
                    // Dies müssen wir prüfen bevor wir das Element schließen:
                    if (contentActive && contentActive != contents[i]) {
                        // Jetzt das aktive Element schließen:
                        contentActive.classList.remove('active');
                    }
                    // Jetzt können wir die Sichtbarkeit des aktuellen
                    // Elements umschalten:
                    contents[i].classList.toggle('active')
                });
            }
        </script>

Alles anzeigen

Learner2021 · 30. Oktober 2021

Wunderbar, das funktioniert, vielen herzlichen Dank.. einen schönen Abend und ein entspannten Sonntag wünsche ich

Sempervivum · 31. Oktober 2021

Gern geschehen, ich wünsche ebenfalls einen schönen Sonntag!

Learner2021 · 31. Oktober 2021

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

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

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

Sempervivum · 31. Oktober 2021

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?

Learner2021 · 31. Oktober 2021

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

<div class="flexbox-text">
    <h5>lallaala</h5>
    <p>xx</p>
</div>

Sempervivum · 31. Oktober 2021

Du kannst einem Element problemlos mehrere Klassen geben;

Code

<div class="flexbox-text active">
    <h5>lallaala</h5>
    <p>xx</p>
</div>

Elemente richtig floaten

Jetzt mitmachen!

Teilen

Tags