Inhaltselemente/Artikel per Klick ein- und ausblenden

[Tashera]

Hallo,

gibt es eine Möglichkeit oder eine Erweiterung Inhaltselemente oder Artikel per Mausklick ein- oder auszublenden?

Ich habe eine Seite gestaltet (für einen Fotografen), bei der im Hintergrund eine Slideshow per bg_stretcher läuft.
Im Vordergrund befindet sich mittig ein transparenter Balken (400px) auf dem ein Text steht, z.B. auf der Startseite: Herzlich willkommen...
Damit ein Besucher die Bilder komplett sehen kann ohne den Balken, brauche ich eine Möglichkeit, wie man den Balken ein- und ausblenden kann.

Kann mir jemand helfen?

[jubel]

Das klingt im Prinzip nach einem Akkordeon, nur so formatiert, dass es über dem Bild liegt. Müsste eigentlich über CSS-Positionierung hinzukriegen sein.

[Tashera]

Vielen Dank schonmal
Von der Funktion her ist es genau das was ich brauche, nur brauche ich dann mehr als ein Akkordeon Inhaltselement.
Und ich habe ja nur die Überschrift und einen Text, bei mehreren Texte würde es klappen.

[jubel]

Das habe ich nicht ganz verstanden. Wenn du nur einen Textblock hast, den du ein-/ausblenden willst, dann brauchst du doch auch nur ein Akkordeon?

[Tashera]

stimmt, hab das mit dem Akkordion hinbekommmen

wenn man auf "schließen" klickt schließt sich das Akkordion, muss das Wort noch austauschen, schließen passt nicht ganz
Jetzt muss ich es nur noch hinbekommen, dass das Wort "schließen" oben steht, am liebsten auf dem horizontalen Balken, damit sich der komplette vertikale Balken schließen kann.
Und man sich die Bilder der Galerie komplett ansehen kann.
Und den Abstand zwischen dem Wort "schließen" und dem eigentlichen Text müsste dann so groß sein, dass der "Willkommen-Text" auf seiner jetzigen Position stehen bleibt.
Dann muss ich es nur noch hinbekommen, dass er bis zum unteren Rand geht start.jpg

[jubel]

Das müsste alles per CSS zu lösen sein.

[Tashera]

Habe noch einmal eine Frage dazu.

Gibt es eine Möglichkeit, die Bereichsüberschrift anderweitig zu positionieren?
Toll wäre es, wenn ich diesen z.B. in den oberen Bereich der Navi mit einbinden könnte. Da würde es mir schon reichen, wenn ich einfach die Höhe exakt angeben könnte.

Des weiteren hat der Text/Artikel einen farbigen Hintergrund.
Ich möchte z.B. dass sich dieser komplett ausblendet, wenn ich auf die Bereichsüberschrift/Button klicke.

Im Moment ist es so, dass sich zwar der Inhalt ausblendet, allerdings bleibt die Bereichsüberschrift bestehen (soweit auch okay)
- schön wäre es nur, wenn diese nicht den farbigen Hintergrund behalten würde.

Ist das machbar?

[jubel]

Du kannst die Bereichsüberschrift problemlos anders formatieren. Sie hat normalerweise die Klasse "toggler" und wenn sie aktiv ist (Akkordeon geöffnet), dann zusätzlich "active".

Beispiel:

.toggler {
color: #f00;
}
.toggler.active {
color: #0f0;
}

[Tashera]

Danke, das werde ich direkt mal ausprobieren.

Habe dazu aber noch eine doofe Frage; ich muss dazu sagen, ich bin noch Contao-Neuling, aber lernbereit - das gebe ich dann im CSS der Bereichsüberschrift ein, oder einmal im Stylesheet?

[jubel]

Einmal im Stylesheet-Editor!
stylesheeteditor2.jpg
stylesheeteditor.jpg

Díe CSS-Felder bei den einzelnen Inhaltselementen ignorierst du am besten. Die sind nur in selten Fällen sinnvoll (ich habe sie noch nie gebraucht).

Anmerkung:
Grundsätzlich ist es immer einfacher zu helfen, wenn du einen Link zur Seite angeben kannst. Sonst kann man dir nur sehr allgemein antworten.

[Tashera]

Danke dir!!!!!

Es geht um diese Seite: http://www.wppt-net.de/afix/index.php/home.html

Ich probiere mal herum!

[Tashera]

Jetzt habe ich doch noch einmal eine Frage dazu. Sorry.
Vielleicht kannst du dir die Seite mal ansehen?

Die Position der Bereichsüberschrift habe ich nun verändern können, aber wie sage ich ihm, dass

1. die Bereichsüberschrift "toggler" den Hintergrund des Balkens gar nicht übernehmen/mitnehmen soll?
2. sobald das Inhaltselement geschlossen ist, bis auf die Bereichsüberschrift nichts mehr zu sehen ist?
( auch da soll der gesamte Hintergrundbereich verschwinden)

Viele Grüße!

[jubel]

1. die Bereichsüberschrift "toggler" den Hintergrund des Balkens gar nicht übernehmen/mitnehmen soll?

Du willst, dass nur der Akkordeoninhalt hinterlegt ist?

Dann könntest die Hintergrundfarbe gar nicht erst für #balken setzen, sondern nur für .accordion.

2. sobald das Inhaltselement geschlossen ist, bis auf die Bereichsüberschrift nichts mehr zu sehen ist?
( auch da soll der gesamte Hintergrundbereich verschwinden)

Das erledigt sich damit auch gleich.

Da es keine Hintergrundfarbe mehr für das komplette Akkordeon gibt, sondern nur noch für den Inhalt, verschwindet alles, wenn auch der Inhalt verschwindet.

[Tashera]

Jetzt kommen wir dem Ganzen schon näher.

Habe den Innenabstand, den Schatten etc. wie es vorher auch war bei .accordion definiert.
Allerdings sieht das im moment so aus.

[jubel]

Du willst, dass der Hintergrund wie vorher bis nach oben geht?

.toggler.active {
background-colour:rgba(31, 31, 31, 0.8);
padding-bottom: 140 px;
}

margin-bottom nimmst du bei .toggler raus und bei .accordion oben keine runden Ecken. Dann sollte es passen.

[Tashera]

Genau, nur soll der Inhalt nicht so an dem Navigationsbalken kleben.
Das passiert aber, sobald ich margin-bottom rausnehme.


Allein der Hintergrund soll direkt anliegen, aber etwas gestreckt sein.
Der Text soll etwas weiter unten beginnen. (z.B. mit einem Abstand von 140px)

[jubel]

Versuch's mal damit:

.ce_accordion {
    background-color: rgba(46, 46, 46, 0.8);
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.7);
    padding: 0px 40px;
    width: 40%;
}

.toggler {
    font-size: 30px;
    text-align: center;
    padding-bottom: 0;
}

.toggler.active {
    padding-bottom: 140px;
}

Ergebnis sieht bei mir dann so aus:
besipiel.jpg

[Tashera]

Perfekt. Genau so hatte ich mir das gedacht.
Also irgendwas mache ich noch falsch. Aktuell sieht es so aus.

[jubel]

Mach mal aus den 70 px eine 0:

.ce_accordion {
    background-color: rgba(46, 46, 46, 0.8);
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.7);
    min-height: 100%;
    padding: 70px 40px;
    width: 40%;
}

Das min-height brauchst du dort eigentlich auch nich (s.o.).

[Tashera]

Super! Das war der Fehler. Danke!

Jetzt sind es nur noch ein paar "Schönheitsfehler" wie z.B. den abgeschnittenen Schatten unten und evtl eine Mouseover-Funktion im toggler
und dann ist es perfekt.

Hast mich wirklich ein ganzes Stück weiter gebracht!!!

[jubel]

Gerne!

Den abgeschnittenen Schatten unten kriegst du weg, wenn du .ce_accordion unten ein wenig margin gibst und die Mouseover kriegst du mit .toggler:hover hin.

Diese beiden Bücher kann ich dir empfehlen:
http://little-boxes.de/
http://websites-erstellen-mit-contao.de/
Die haben auch mich erst dahin gebracht, wo ich bin.

[Tashera]

Perfekt. Du bist meine Rettung!
Nach dem einen Problem folgt das Nächste.. das gibts doch gar nicht!
Siehst du das graue Quadrat, was sich jetzt unter dem toggler platziert hat? Wo kommt das her?

Danke für die Buchempfehlung. Eigentlich ist ja alles ganz logisch, ab und zu weiß man einfach nur nicht, wie man was ansprechen soll :-)

[jubel]

Siehst du das graue Quadrat, was sich jetzt unter dem toggler platziert hat? Wo kommt das her?

Das produzierst du hier:

.toggler {
  background-color: #2E2E2E;
...

[Tashera]

Danke!
Du bist echt fit :-))

Versuch's mal damit:

.toggler {
    font-size: 30px;
    text-align: center;
    padding-bottom: 0;
}

Nochmal darauf zurück: das funktioniert, aber man kann diesen unschönen "Sprung" des Textes beim schließen nicht verhindern oder?

[jubel]

Probier mal das:

.accordion div p {
    padding-top: 140px;
}

Und nimm dafür das hier wieder raus:

.toggler.active {
    padding-bottom: 140px;
}

[Tashera]

Das war die Lösung!
Super. Danke dir.

Besteht die Möglichkeit innerhalb des Akkordeons eine Bildergalerie zu laden?
Im Grunde genommen kann ich im Artikel ja nur einen Elementtyp auswählen.

Sorry, hier jagt eine Frage die nächste...

[jubel]

Besteht die Möglichkeit innerhalb des Akkordeons eine Bildergalerie zu laden?
Im Grunde genommen kann ich im Artikel ja nur einen Elementtyp auswählen.

Das Akkordeon hat zwei mögliche Einstellungen:
1. Einzelnes Element: nur ein Inhaltselement
2. Umschlag Anfang/Ende: Dazwischen kannst du so viele Inhaltselemente packen wie du möchtest, also auch eine Bildergalerie.