Akkordeon Element

25.10.2017 18:58
avatar  Rocket
#1
Ro

Hallo, ich bin Leider kein Experte und hoffe daher, dass Ihr mir bei diesem Problem helfen könnt.
Und zwar möchte ich eine Art DropDown auf verschiedenen Unterseiten einrichten. Nach ein bisschen Recherche bin ich hierauf gestoßen: "Link"
(Akkordeon für Jimdo Standard-Elemente) das ist so ziemlich das, was ich mir vorgestellt habe. Einziges Problem, mir ist Aufgefallen, dass man bei dieser Methode das Formular nicht ausfüllen kann, sobald man es anklickt schließt sich das Akkordeon wieder.
Zudem weiß ich Leider nicht, wie man so etwas Umsetzt. Es würde mir sehr weiterhelfen, wenn mir jemand helfen könnte. Vielen Dank schon mal. Lg Ben
Probieren tue ich das Ganze auf meiner Testseite: Design: Rome "Link" falls das benötigt wird :)


 Antworten

 Beitrag melden
26.10.2017 06:53
avatar  Charles
#2
avatar

Probier mal diese Variante aus. Die funktioniert bei mir sehr gut.
https://codepen.io/raubaca/pen/PZzpVe

Man verändert keine Webseiten man verändert das Verhalten der Besucher auf der Webseite.
Analytics zeigt dir nicht den Grund, es zeigt dir das Ergebnis des Verhaltens der Benutzer.
Retail Is Detail.

 Antworten

 Beitrag melden
26.10.2017 20:17
avatar  Rocket
#3
Ro

Hallo Charles, danke für Deine schnelle Antwort! Ich habe die Variante ausprobiert, die Du mir vorgeschlagen hast. Sie funktioniert auch einwandfrei. Allerding weiß ich nicht wie man bei der Variante jimdo-Standartelemente einbaut. Und die Mobile Ansicht gefällt mir bei der anderen Variante auch besser. Von daher eignet sie sich nicht so gut für mein Vorhaben.
Hättest Du eine Idee für die Variante, die ich geschrieben hatte? Wäre schön, wenn Du eine Lösung für mein Problem hättest. Lg Ben


 Antworten

 Beitrag melden
02.11.2017 22:17
avatar  TiJo
#4
Ti

hast du schon eine Möglichkeit gefunden?


 Antworten

 Beitrag melden
04.11.2017 20:23
avatar  az_
#5
avatar
az_

Ich habe dazu einmal ein Widget geschrieben: https://designtest-hamburg.jimdo.com/sta.../css-akkordeon/

...mit diesem Widget kannst Du beliebig viele Akkordeon-Elemente auf Deiner Webseite mit Jimdo-Standard-Elementen anlegen. Bei der Methode können auch für den Auslöser der Akkordeons Standartelemente benutzt werden.

LG, az


Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!


...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de


Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html


 Antworten

 Beitrag melden
04.11.2017 20:37 (zuletzt bearbeitet: 04.11.2017 20:53)
avatar  TiJo
#6
Ti

ich habs mittlerweile mit diesem Tut geschafft: https://designtest-hamburg.jimdo.com/sta...rdeon-tutorial/.
Zu sehen auf https://www.jordan-brennholz.de/lieferung-abholung/.
Mit CSS nach deiner Anleitung hab ichs nicht versucht, da auf der Beispielseite das Akkordeon zu geht, wenn in ein Formularfeld geklickt wird. Außer das ist nur ein Bild =D

Vielen Dank @az_ für beide Tutorials


 Antworten

 Beitrag melden
04.11.2017 20:57
avatar  az_
#7
avatar
az_

...aua! Diesen Fehler hatte ich eigentlich schon behoben! Vielleicht versehetlich eine alte CSS-Datei auf den Server geschoben.

Du meinst dieses hier: https://designtest-hamburg.jimdo.com/sta...c-m-13136438336 ?
a! Das war ein z-index-Fehler. Sollte jetzt aber wieder funktionieren!

LG, az


Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!


...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de


Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html


 Antworten

 Beitrag melden
04.11.2017 21:01
avatar  TiJo
#8
Ti

@az_ Funktion ist wiederhergestellt.
Trotzdem lass ich das bei mir jetzt mit JS - vorerst


 Antworten

 Beitrag melden
04.11.2017 21:17
avatar  az_
#9
avatar
az_

Jau, die ist ja auch nicht schlecht!

LG, az


Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!


...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de


Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html


 Antworten

 Beitrag melden
05.11.2017 16:18
avatar  TiJo
#10
Ti

wie ich gerade festgestellt habe, reicht in meinem Fall auch der Befehl .toggle


 Antworten

 Beitrag melden
07.11.2017 22:55
avatar  az_
#11
avatar
az_

...in wie fern? bzw. wobei?


Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!


...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de


Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html


 Antworten

 Beitrag melden
08.11.2017 11:42
avatar  TiJo
#12
Ti

in meinem Fall soll nur das Forumlar ein- oder ausgeblendet werden, wenn ich auf einen Button klicke. Dazu brauche ich lediglich .toggle


 Antworten

 Beitrag melden
11.11.2017 17:23
avatar  az_
#13
avatar
az_


Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!


...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de


Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html


 Antworten

 Beitrag melden
11.11.2017 17:30
avatar  TiJo
#14
Ti

Zitat von az_ im Beitrag #13
...Du meinst, wie hier: Funktion und Beschriftung von Warenkorbbutton für einzelnes Produkt ändern



LG, az




brutal richtig! ;)


 Antworten

 Beitrag melden
10.10.2018 09:03
#15
Na

Hallo AZ

ich bin neu mit Jimdo unterwegs und möchte ebenfalls gerne ein Akkordeon einbauen. Nach langem hin und her bin ich nun am Verzweifeln, da es einfach nicht klappen will :(
Ich würde gerne folgendes Akkordeon einfügen https://codepen.io/abergin/pen/ihlDf

Kann man in eifachen Schritten erklären wie ich zum Ziel komme?

Das wäre super!

Merci ud Gruss
Natascha


 Antworten

 Beitrag melden
21.10.2018 12:35
avatar  az_
#16
avatar
az_

...auf meiner Testseite https://designtest-hamburg.jimdo.com/jim.../css-akkordeon/ findest Du das Akkordeon in Aktion. Ich mussste es allerdings ein wenig für Jimdo anpassen.

Wenn Du es selbst integrieren willst, sieh Dir den Codepen genau an. Da ist die Lösung drin.

Ich habe ein Widget geschrieben, dass es ermöglicht, das Akkordeon mit Jimdo-Standardelementen zu kombinieren. Hier eine weitere Testseite, die ich damit ausgestattet habe: https://redesign-designtest-rome.jimdofree.com/

Wenn Du das Widget gern benutzen möchtest, schreib mich bitte an.

LG, az


Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!


...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de


Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html


 Antworten

 Beitrag melden
Bereits Mitglied?
Jetzt anmelden!
Mitglied werden?
Jetzt registrieren!