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
<div class="flexbox-text">
<h5>lallaala</h5>
<p>xx</p>
</div>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
document.getElementsByID('initial-open').classList.toggle('active')allerdings zeigt er mir den Text trotzdem erst auf den Kopfdruck an...
Wunderbar, das funktioniert, vielen herzlichen Dank.. einen schönen Abend und ein entspannten Sonntag wünsche ich
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')
});
}.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
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.
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:
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:
der erste Button bekommt eine Id="inital-open" im HTML
CSS dann folgendes
#inital-open{
height: 100%;
}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
<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>@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%;
}<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>.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;
}Entschuldige ich habe den Flexbox Test Code hochgeladen .. das ist nun der mit der Accordion Funktion, selbes Problem
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>Und CSS:
@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;
}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
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.
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