Neu Shop-Suchfeld als ICON

[SuesserZwerg]

Guten Morgen.

Ich möchte gerne die Shop-Suche im Header (JTL4) nicht als Eingabefeld haben, sondern nur als Icon (z.B. eine Lupe). Klickt man dann auf dieses Icon soll das Eingabe-Suchfeld erscheinen.
Ich habe das schon in einigen JTL Shops gesehen, komme aber nicht dahinter, wie ich das Templateseitig lösen könnte. Es wäre sehr nett von euch, wenn mir jemand unter die Arme greifen könnte. Vielleicht schon ein paar Ansätze, wie ich das lösen könnte. Oder der ein oder andere hat das sogar bereits selbst umgesetzt.
Jedenfalls danke ich vorab schon mal.

Gruß
SüsserZwerg

 

[sebjo82]

https://www.solodev.com/blog/web-design/creating-a-toggled-search-bar.stml
https://jsfiddle.net/solodev/cdzow8z8/

 

[SuesserZwerg]

Danke sebjo82. Genau so möchte ich das. Die zwei Beispiele sind gut.
Allerdings vermute ich, dass ich mit der Integration in den JTL4 Shop damit etwas "zu kämpfen" habe.

 

[sebjo82]

Mit der Integration in die JTL Templates bin ich auch nicht voll auf der Höhe. Vielleicht meldet sich ja noch jemand. Der reine HTML+CSS+JS Code ist ja schonmal da. Nun muss man den nur noch ordentlich ins Template integrieren